Forms are great for getting information from the user. They usually have multiple elements inside them that accept input from the user. The data acquired from the input of the user is then sent to the server to process.
The syntax of the
form element is as follows:
<form accept-charset action autocomplete enctype method name novalidate target></form>
The attributes that are used in the form element are as follows:
accept-charset: This is a list of character encodings that the server accepts. This can be a space- or comma-delimited list.action: This is the URL that will process the form.autocomplete: This lets the browser know whether it can autocomplete this form with previous values.enctype: This sets the MIME type for the content being sent to the server.method: This is the HTTP method that will be used to submit the form. It can bePostorGet.name: This is the name of the form.novalidate: This tells the browser not to validate the form.target: This states where the response will be displayed. This can be:_self,_blank,_parent, or_top.
The form element is the root element of a form in a document. When submitted, the form will contain all the data that is entered into the different elements inside of the form.
Here is a simple form of the syntax:
<form action="processForm" method="post">
<input type="text" name="text-input"/>
<button type="submit">Submit!</button>
</form>The syntax of the fieldset element is as follows:
<fieldset disabled form name></fieldset>
The attributes that are used in the fieldset element are as follows:
disabled: This disables all the elements in the fieldsetform: This is the ID of the form theformattribute belongs toname: This is the name of fieldset
The fieldset element allows us to group related inputs together. The default style of most browsers is to put a border around the fieldset.
If the first element is a legend element, then the fieldset will use that as its label.
Here is an example of using the fieldset element:
<form action="processForm" method="post">
<fieldset>
<legend>This is a fieldset</legend>
<input type="text" name="text-input" />
</fieldset>
</form>The syntax of the label element is as follows:
<label accesskey for form></label>
The attributes that are used in the label element are as follows:
accesskey: This is a shortcut for theaccesskeyelementfor: This is the ID of a form element that this is the label forform: This is the ID of the form theformattribute is associated with
The label element is for labeling inputs. You can either put the element in the label or use the for attribute. When the label is correctly linked to an input, you can click the label and the cursor will be in the input.
Here is an example that covers each different way of labeling an element:
<form action="processForm" method="post">
<label>First name: <input type="text" name="firstName" /></label>
<label for="lastNameInput">Last name: </label><input id="lastNameInput" type="text" name="lastName" />
</form>The syntax of the input element is as shown:
<input accept autocomplete autofocus checked disabled form formaction formenctype formmethod formnovalidate formtarget height inputmode max maxlength min minlength multiple name placeholder readonly required size spellcheck src step tabindex type value width></input>
The attributes that are used in the input element are as follows:
accept: This is used to specify which file types are accepted for the web page.autocomplete: This says whether the browser can autocomplete this input based on previous values.autofocus: This lets the browser automatically focus on the element. This should only be used on one element.checked: This is used with the radio or checkbox. This will select the value on page load.disabled: This says whether or not to disable the element.form: This states the ID of the form.formaction,formenctype,formmethod,formnovalidate, andformtarget: These will override the form's value if these attributes are associated with a button or image.height: This is used to set the height of the image.inputmode: This gives a hint to the browser of what keyboard to display. For example, you can use numeric to specify only the keypad.max: This is the maximum number or date-time of the system.maxlength: This is the maximum number of characters that can be accepted in the web page.min: This is the minimum number or date-time of the system.multiple: This says whether there can be multiple values or not. This is used withemailorfile.placeholder: This is the text that is displayed in the element when there is no value assigned to this attribute.readonly: This makes the element of the read-only format.required: This is the element that is required to be assigned a value and cannot be blank.size: This is the size of the element.src: This will be the URL of the image if it is of theimgtype.step: This is used with theminandmaxattributes to determine the incremental steps.tabindex: This is the order of the elements when using tab.type: Refer to the next section for the description.value: This is the initial value of the element.width: This is the attribute to set the width.
The input element is the main way to get data from the user. This element can vary quite a bit based on the type that is used. HTML5 has added a few inputs that also give you validation. For example, the email type will also validate that the e-mail is a valid email. In addition to this, the type can give hints to the browser about what keyboard to display. This is important for mobiles, which have many different virtual keyboards. For example, the tel type will show a number pad instead of the regular keyboard. Here is a rundown of the different types of keyboards and their description:
button: This is a button.checkbox: This is a checkbox.color: For most browsers, this will create a color picker; however, it is not required by HTML5.date: This creates a date picker.datetime: This creates a date and time picker using a time zone.datetime-local: This creates a date and time picker without a time zone.email: This is a text input for e-mail addresses. This type validates e-mails.file: This selects a file.hidden: This attribute will not be displayed, but the value will still be part of the form.image: This essentially creates an image button.month: This can enter the month and year.number: This is used for a floating point number.password: This is a text input where the text is not shown.radio: This is a control to group multiple elements using the same name attribute. Only one from the provided list can be selected.range: This a way to select a range of numbers.reset: This resets the form.search: This is a text input.submit: This is a button that will submit the form.tel: This is an input to enter a phone number.text: This is your basic text input.time: This is the time without a time zone.url: This an input to enter a URL. This will do validation as well.week: This is to enter the week number.
Here is an example of the text, e-mail, and tel inputs:
<input type="text" name="name" placeholder="enter email"/> <input type="email" /> <input type="tel" />
The syntax of the
button element is as follows:
<button autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name type value></button>
The attributes that are used in the button element are as follows:
autofocus: This lets the browser automatically focus on the element that this is an attribute of. This should only be used on one element.disabled: This states whether or not to disable the element.formaction,formenctype,formmethod,formnovalidate, andformtarget: These will override the form's value if this is a button or image.name: This is the name of the button for the form.type: This changes what the button does. The values aresubmit—which submits the form,reset— which resets the form,button—which is the default that does nothing.value: This is the initial value of the element.
The syntax of the select element is as follows:
<select autofocus disabled form multiple name required size ></select>
The attributes that are used in the button element are as follows:
autofocus: This lets the browser automatically focus on this element. This should only be used on one element.disabled: This states whether or not to disable the element.form: This is the ID of the form.multiple: This states whether or not multiple items can be selected.name: This is the name of the element.required: This checks whether the option needs a value.size: This determines the number of rows for the element.
The button element is used with the option element. Multiple option elements can be added to the list to select or choose from. The value of the selected option is used when the form is submitted.
Here is an example:
<select name="select">
<option value="1">One</option>
<option value="2">Two</option>
</select>The
optgroup element is the option group element:
<optgroup disabled label></optgroup>
The attributes that are used in the optgroup element are as follows:
disabled: This disables the grouplabel: This is the heading in the drop-down menu
The optgroup element allows you to group options together. The children of this element need to be the option elements. They are not selectable and do not have a value.
Here is an example of the outgroup element with car makes and models:
<select name="cars">
<optgroup label="Ford">
<option value="Fiesta">Fiesta</option>
<option value="Taurus">Taurus</option>
</optgroup>
<optgroup label="Honda">
<option value="Accord">Accord</option>
<option value="Fit">Fit</option>
</optgroup>
</select>The syntax of the option element is as shown:
<option disabled selected value></option>
The attributes that are used in the option element are as follows:
disabled: This states whether or not the element is disabled.selected: This states whether or not the option is selected. We can set only one option per selected element.value: This states the value of theoption.
The syntax of the textarea element is as follows:
<textarea autocomplete autofocus cols disabled form maxlength minlength name placeholder readonly required rows spellcheck wrap></textarea>
The attributes that are used in the textarea element are as follows:
autocomplete: This states whether the browser can autocomplete this input based on previous values or not.autofocus: This lets the browser automatically focus on this element. This should only be used on one element.cols: This states the width of thetextareaelement in characters.disabled: This states whether or not to disable the element.form: This is the ID of the form.maxlength: This is the maximum number of characters.minlength: This is the minimum number of characters.name: This is the name of the element.placeholder: This is the text that is displayed in the element when there is no value.readonly: This makes the element read-only.required: This states that the element is required and cannot be blank.rows: This states the number of rows fortextarea.spellcheck: This states whether or not the element should have the spelling checked.wrap: This states how the lines are wrapped.