ITP 104 - 09-26-17 - forms.html

In this example below you will see how to do a ITP 104 - 09-26-17 - forms.html with some HTML / CSS and Javascript

This awesome code was written by nayeon, you can see more from this user in the personal repository.
You can find the original code on
Copyright nayeon ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>ITP 104 - 09-26-17 - forms.html</title>


  <!DOCTYPE html>
		.form-row {
			margin-bottom: 10px;
		#outercontainer {
			/*background-color: #443217;*/
			background-color: rgba(75,42,3,0.8);
			color: #ddd;
			font-family: "Arial";
			width: 600px;
			margin-left: auto;
			margin-right: auto;
			padding: 20px;
			/*opacity: 0.5;*/
			margin-top: 80px;
		h2 {
			text-align: center;
		body {
			background-image: url("");
			background-repeat: no-repeat;
			background-size: cover;
			/*background-position: left bottom;*/
		label {
			width: 220px;
			background-color: red;
			float: left;
			text-align: right;
			margin-right: 10px;
		.radio-label {
			/*overwrote properties in the label rule aboe*/
			float: none;
			width: auto; /* this overrides width: 220px from label */
		.submit-row {
			text-align: center;
		button {
			width: 100px;
			height: 40px;
			border: 0;
			border-radius: 6px;
			background: linear-gradient(#49708f, #293f50);
			color: white;
			font-size: 14px;
		button:hover {
			background: #293f50;
			cursor: pointer;
	<div id="outercontainer">
		<h2>SIGN UP</h2>

			<div class="form-row">
				<label for="username">Name:</label> 
				<input type="text" id="username"/>

			<div class="form-row">
				<label for="password">Password:</label>
				<input type="password" id="password"/>

			<div class="form-row">

				<input type="radio" name="gender" id="male"/>
				<label class="radio-label" for="male">Male </label>

				<input type="radio" name="gender" id="female"/>
				<label for="female" class="radio-label">Female</label>

			<div class="form-row">

				<input type="checkbox" id="running"/>
				<label for="running" class="radio-label">Running</label>

				<input type="checkbox" id="hiking"/>
				<label for="hiking" class="radio-label">Hiking</label>

				<input type="checkbox" id="rowing"/>
				<label for="rowing" class="radio-label">Rowing</label>

			<div class="form-row">
				<label for="year">School Year:</label>
				<select id="year">

			<div class="form-row">
				<label for="comments" style="padding-top: 30px;">Comments</label>
				<textarea id="comments" style="width: 300px; height: 100px;"></textarea>

			<div class="form-row submit-row">
				<!-- There are two ways to create a submit button -->
				<input type="submit" value="Send"/>