You can use HTML forms to collect information from people who visit your webpage.
In this course, you'll learn HTML forms by building a signup page. You'll learn how to control what types of data people can type into your form and some new CSS tools for styling your page.
Step 1
<!DOCTYPE html>
Step 2
<!DOCTYPE html>
<html></html>
Step 3
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Step 4
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
</body>
Step 5
<body>
<h1>Registration Form</h1>
</body>
Step 6
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
</body>
Step 7
body{
width:100%;
height:100vh;
}
Step 8
body {
width: 100%;
height: 100vh;
margin:0;
}
Step 9
body {
width: 100%;
height: 100vh;
margin: 0;
background-color:#1b1b32;
color:#f5f6f7;
}
Step 10
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action="https://register-demo.freecodecamp.org"></form>
</body>
Step 11
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset></fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
</form>
</body>
Step 12
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label></label>
<label></label>
<label></label>
<label></label>
</fieldset> <fieldset></fieldset> <fieldset></fieldset> </form>
Step 13
<fieldset>
<label>Enter Your First Name:</label>
<label>Enter Your Last Name:</label>
<label>Enter Your Email:</label>
<label>Create a New Password:</label>
</fieldset>
Step 14
label{
display:block;
margin: 0.5rem 0;
}
Step 15
<fieldset>
<label>Enter Your First Name: <input /></label>
<label>Enter Your Last Name: <input /></label>
<label>Enter Your Email: <input /></label>
<label>Create a New Password: <input /></label>
</fieldset>
Step 16
<fieldset>
<label>Enter Your First Name: <input type="text" /></label>
<label>Enter Your Last Name: <input type="text" /></label>
<label>Enter Your Email: <input type="email" /></label>
<label>Create a New Password: <input type="password" /></label>
</fieldset>
Step 17
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" /></label>
<label for="email">Enter Your Email: <input id="email"/></label>
<label for="new-password">Create a New Password: <input id="new-password" /></label>
</fieldset>
Step 18
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" required /></label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
<input type="submit" value="Submit" />
Step 19
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" minlength="8" required /></label>
</fieldset>
Step 20
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
Step 21
<fieldset>
<label></label>
<label></label>
<label></label>
</fieldset>
Step 22
<fieldset>
<label><input type="radio" /></label>
<label><input type="radio" /></label>
<label></label>
</fieldset>
Step 23
<fieldset>
<label><input type="radio" /></label>
<label><input type="radio" /></label>
<label><input type="checkbox" required /></label>
</fieldset>
Step 24
<fieldset>
<label><input type="radio" /> Personal Account</label>
<label><input type="radio" /> Business Account</label>
<label><input type="checkbox" required /> I accept the terms and conditions</label>
</fieldset>
Step 25
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label><input type="checkbox" required /> I accept the terms and conditions</label>
</fieldset>
Step 26
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label><input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a></label>
</fieldset>
Step 27
<fieldset>
<label><input type="file" />Upload a profile picture:</label>
</fieldset>
Step 28
<fieldset>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions"><input id="terms-and-conditions" type="checkbox" required /> I accept the terms and conditions</label>
</fieldset>
Step 29
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<select>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<select>
</fieldset>
Step 30
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</label>
</fieldset>
Step 31
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<option>(select one)</option>
<option>freeCodeCamp News</option>
<option>freeCodeCamp YouTube Channel</option>
<option>freeCodeCamp Forum</option>
<option>Other</option>
</select>
</label>
</fieldset>
Step 32
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
</fieldset>
Step 33
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio: <textarea></textarea>
</fieldset>
Step 34
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea rows="3" cols="30"</textarea>
</label>
</fieldset>
Step 35
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea rows="3" placeholder="I like coding on the beach..." cols="30"></textarea>
</label>
</fieldset>
Step 36
<fieldset>
<label>Enter Your First Name: <input type="text"name="firstname" required /></label>
<label>Enter Your Last Name: <input type="text"name="lastname" required /></label>
<label>Enter Your Email: <input type="email"name="email" required /></label>
<label>Create a New Password: <input type="password"name="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio"name="account-type" /> Personal Account</label>
<label><input type="radio"name="account-type" /> Business Account</label>
<label>
<input type="checkbox"name="termsandconditions" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input name="file" type="file" /></label>
<label>Input your age (years): <input name="number" type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="aboutus">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea rows="3" cols="30" name="bio" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit"
Step 37
<fieldset>
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label for="bio">Provide a bio:
<textarea id="bio"></textarea>
</label>
</fieldset>
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family:Tahoma;
font-size:16px;
}
Step 38
h1, p{
margin: 1em auto;
text-align: center;
}
Step 39
form{
margin: 0 auto;
max-width:500px;
min-width:300px;
width:60vw;
}
Step 40
fieldset{
border: 0;
padding: 2rem 0;
}
Step 41
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f
}
Step 42
fieldset:last-of-type {
border-bottom: none;
}
Step 43
input, textarea, select {
width: 100%;
margin:0px;
margin-top:10px;
}
Step 44
<fieldset>
<label><input class="inline" type="radio" name="account-type" /> Personal Account</label>
<label><input class="inline" type="radio" name="account-type" /> Business Account</label>
<label>
<input class="inline" type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
Step 45
.inline{
width:unset;
}
Step 46
.inline{
width:unset;
margin:0;
margin-right: 0.5 em;
}
Step 47
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align:middle;
}
Step 48
input, textarea{
background-color:#0a0a23;
border: 1px solid #0a0a23;
}
Step 49
input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
min-height: 2em;
}
Step 50
42 min-height: 2em;
Step 51
input[type="submit"] {
display: block;
width:60%;
}
Step 52
input[type="submit"] {
display: block;
width: 60%;
margin:0 auto;
}
Step 53
input[type="submit"] {
display: block;
width: 60%;
margin: 0 auto;
height: 2em;
font-size: 1.1rem;
}
Step 54
input[type="submit"] {
display: block;
width: 60%;
margin: 0 auto;
height: 2em;
font-size: 1.1rem;
background-color:#3b3b4f;
border-color:white;
}
Step 55
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: 100%;
}
Step 56
input[type="file"] {
padding:1px 2px;
}
Step 57
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}