An HTML form is an essential tool for collecting information from users on a website. It allows you to create dynamic interactions and collect valuable data. In its structure, we find several key tags.
The label ""is used to group form elements together. It provides a logical container for all related elements within the form.
The label ""is used to add a description or title to the group of form elements contained in the "". It serves to provide a brief explanation or instruction related to the set of elements.
The label ""is used to associate a descriptive label with a specific form element. It provides readable text describing the purpose or function of the input field. The ""is used in combination with the "for" attribute to establish the association with the form element.
The attribute "for"is used in the label ""to indicate which form element it refers to. The value of the "for" attribute must match the value of the "id" attribute of the form element to which it is to be associated.
The label ""is one of the most commonly used in HTML forms. It defines an input field where users can enter data. It can have different types, such as text, password, number, date, among others. In addition, the "id"is used to uniquely identify a form element within the HTML document.
In summary, an HTML form is composed of tags such as "
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>friendsbook</h1>
<h3>Update Profile Information</h3>
<form>
<fieldset>
<legend>Personal Info</legend>
<label for="name">Name:</label>
<input id="name" type="text"><br>
<label for="email">Email:</label>
<input id="email" type="email"><br>
<label for="dob">Birthday:</label>
<input id="dob" type="date"><br>
<button>Update</button>
</fieldset>
<fieldset>
<legend>Update Password</legend>
<label for="oldpassword">Old password:</label>
<input id="oldpassword" type="password"><br>
<label for="newpassword">New password:</label>
<input id="newpassword" type="password"><br>
<button>Update</button>
</fieldset>
<fieldset>
<legend>More about you</legend>
<label for="pronouns">Pronouns:</label>
<input id="pronouns" type="text"><br>
<label for="country">Country:</label>
<input id="country" type="text"><br>
<label for="bio">Bio:</label>
<textarea id="bio"></textarea><br>
<button>Update</button>
</fieldset>
<input type="hidden" name="trp-form-language" value="en"/></form>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lato:wght@300&display=swap');
h1 {
font-family: 'Fredoka One', italic;
}
body {
text-align: center;
font-family: Lato;
display: grid;
background: seashell;
}
form {
width: 80%;
margin: auto;
}
label {
float: left;
width: 50%;
}
input,
textarea {
float: left;
width: 50%;
margin: 10px;
padding: 10px;
background: lemonchiffon;
font-family: Lato;
border: none;
}
fieldset {
margin: 10px;
font-weight: bold;
background: #FEFEFE;
}
button {
background: plum;
font-size: 15px;
padding: 10px;
border: none;
float: right;
color: white;
}
legend {
background: #F76C6C;
padding: 5px;
color: white;
}
Example 2:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add Shipping Address</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Amazon</h1>
<h3>Add a new shipping address</h3>
<!-- add your code here -->
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Full name (First and Last name)</label><br>
<input id="name" type="text"><br>
<label for="phone">Phone number</label><br>
<input id="phone" type="number"><br>
</fieldset>
<fieldset>
<legend>Address Information</legend>
<label for="country">Country</label><br>
<input id="country" type="text"><br>
<label for="address">Address</label><br>
<input id="address" type="text"
placeholder="Street address or P.O. Box"><br>
<input type="text" placeholder="Apt, suite, unit, building, floor"><br>
<label for="city">City</label><br>
<input id="city" type="text"><br>
<label for="state">State</label><br>
<input id="state" type="text"><br>
<label for="zip">ZIP Code</label><br>
<input id="zip" type="text">
<input type="checkbox"> My address does not have ZIP Code.<br>
<p><input type="checkbox"> Use as my default address.</p>
</fieldset>
<button>Add</button>
<input type="hidden" name="trp-form-language" value="en"/></form>
</body>
</html>
html,
body {
height: 100%;
width: 500px;
margin: 0 auto;
}
body h1 {
text-align: center;
color: orange;
}
