HTML Form Elements
The Form Input Element
The input element is used to control the web based forms to accept the data from the user. The input element has several input types that define the input mechanism for example text field, checkboxes, or buttons. This element has been explained in the previous section.
The select element
Consider the example that was explained in the beginning, it uses a select element. This element is used to select the various names from the drop down list or menu. This is used as follows:
EXAMPLE
<select name = “ mailto-name”>
<option selected> John Abraham
<option> Anna Smith
<option> Ann Dean
<option> Paul
<option> Lee
<option> Thomson
</select>
We use the option element to insert different names in the drop down menu. And also assigned value to the name attribute “mail to-name”, this name is selected from the drop down list. The above HTML document will result in the following:
NOTE: In the above example the name John Abraham is already written in the box because we set it to default using <option selected>.
The textarea element
The textarea element is used to type the body of the message. In other words, the text element simply allows the user to enter text or block of text. The block of text is not bounded to a certain area or size but it can be unlimited. If there is a large text scroll bars are present.
The textarea element shows the characters in a fixed width font so that the attributes cols and rows can specify the width and height of the area surrounded by text. This element is used as follows:
EXAMPLE
<textarea cols = 60 rows = 8 name = “message_body”>
Type your message in this box and delete this message.
</textarea>
Resulting in:
The rows attribute is used to specify the height of textarea in rows and the cols attribute specifies the width of text area in columns.
The Option Element
The option element is used to set various strings as options in the drop down list or menu of the select element. The option element is not empty but the ending tag for this element is optional because this is terminated by default when a new option element is used or when the </select> tag is used.
It uses a DISABLED attribute to disable a certain option, this option will be shown dim as follows:
EXAMPLE
<select name = “ mailto-name”>
<option selected> John Abraham
<option> Anna Smith
<option> Ann Dean
<option Disabled> Paul
<option> Lee
<option> Thomson
</select>
This will make Paul disable making it fade as follows:
The option element also uses selected attribute that makes the string selected by default as shown above, John Abraham is selected.
The button element
This element is used to represent a button in the HTML document. This is used as follows:
EXAMPLE
<button name = “button”>An HTML Button </button>
Will result in:
It used the attribute name. The button element has an end tag.
The <detalist> Element
This element uses the concept of option element that is it also provides the list of options. This element is used as follows:
EXAMPLE
<p> Choose the car from the list </p>
<input list= “Cars” name= “MyChoice” />
<detalist id = “Cars”>
<option value = “BMW”>
<option value = “Ferrari”>
<option value = “Mclaren”>
<option value = “Mercedes-Benz”>
<option value = “Lamborghini”>
<option value = “Jeep”>
</detalist>
This will produce the following result:
The keygen element
The keygen element is used to generate keys in an HTML form. As the form using keygen element is submitted there are two keys that are generated; one is the public key and the other is private. This element is used the web based certificate management. In other words, it provides security and authenticates the users. It is used as follows:
EXAMPLE
<html>
<body>
<form action = “ http://side.edu/cgi-bin/send-message” >
Email Address: <input type=”text” name=”user”><br>
Security: <keygen name=”security”><br>
<button name = “button”> Submit</button>
</form>
</body>
</html>
This will generate the following result:
The keygen element used the attribute name that has assigned the value security this will generate two keys a public that is to be send to the server and a private that will not be shown. There are two options High grade and medium grade.
The output element
The output element is used in HTML forms to display the result obtained by certain calculations. It is used as follows:
EXAMPLE
<form action = “ http://side.edu/cgi-bin/send-message” >
<input type=”number” name=”b” value= “70” /> +
<input type=”number” name=”a” value= “20” /> =
<output name=”result”> 90</output>
</form>
This will result as follows:
In the above example the input type is numeric type that is you can insert numbers that are saved in b and a and after their addition, the output result is shown.
