Interacting with <form> elements
HTML forms are designed to help capture a user’s input and forward it to the host . This element can have other elements inside it, for example, an input, label, data list, textarea and buttons. In order to create HTML forms we use the <form> element . This element acts as a container to other elements mentioned above.
The <input> element is widely used as input can be shown in various ways, namely: “text” for a single-line text field, “Radio” for a radio button, “checkbox” for a checkbox and “button” for a clickable button on the form(HTML Form Elements, 2021).
This line would create a single-line text field on the form. The “for” and “id” attributes should be equal for the to bind.
<form>
#Text area
<label for=”email”>Email:</label><br>
<input type=”text” id=”Email” name=”email”><br>
</form>
Changing the “type” attribute of <input> element would create another kind of input type. For example, the “button” attribute would complete a clickable form.
<textarea> element provides a multi-line text field. “Rows” and “cols” attributes show the visible number of text lines and visible width in a Textarea, respectively (HTML Form Elements, 2021).
<textarea name=”text1" rows=”6" cols=”20">
my text area
</textarea>
<datalist> element allows you to specify a list for already defined <input> elements.
The “list” attribute of <input> must refer to the “id” attribute of the <datalist> element in order to make sure it is getting the required data (HTML Form Elements, 2021).
<! — Create a datalist for a combo box →
<input list=”Search Engine”>
<datalist id=”Search Engine”>
<option value=”Google”>
<option value=”Bing”>
<option value=”SwagBucks”>
<option value=”Wikipedia”>
</datalist>
Using the form elements in addition with the other elements allows us to create sites that take into consideration the wants and needs of our clients.
References
W3schools.com. 2021. HTML Form Elements. [online] Available at: <https://www.w3schools.com/html/html_form_elements.asp> [Accessed 18 April 2021].
