An HTML forms is a form that allows users input raw information as a means of data collection. These raw information are sent to the web server for storing and processing the information after submission.

The HTML forms element has a long list of other elements that can be used with it when creating a form.

They are:

• <button>
• <datalist>
• <fieldset>
• <input>
• <label>
• <legend>
• <meter>
• <optgroup>
• <option>
• <output>
• <select>
• <textarea>

We'll take each element and explain to you how they are used when creating HTML forms.

<BUTTON> ELEMENT

The button element can be used as a clickable link that takes the user to another environment or it can be a submit button. We have attributes that work with the <button> element to give it a different instruction on what or what not to do.

These are the attributes:

ATTRIBUTE VALUE	FUNCTION	CODE EXAMPLE
Autofocus	This button attribute value tells the browser to focus on the button after loading a page or within a page	<button type="button" autofocus onclick="alert ('Magic!')" >Touch me</button>
Disabled	It disables the button after performing a particular function. When a button has been disabled, it can only be enabled again using a JavaScript function.	<button disabled>Touch me</button>
Form	The form attribute in the <button> element tells the web browser the form it belongs to. Always make sure that the form <button> element attribute is set as the value in the form_id of the same document.
Formaction	The formaction attribute tells the web browser the URL it should take the provided information to after submission.
Formenctype	When a formenctype attribute is used, it tells the web browser how the provided data should be encoded. By default, for every information entered, only the symbols will be encoded. If the urlencode attribute is used instead, symbols will not be encoded.
Name	Name attribute tells the name of the button.
Type	The Type attribute tells the web browser the button type whether it should be as: reset button, submit button, or ordinary button. Always specify the button type as different browsers have their own default button type.
Value	With the value attribute, a plain text is entered that will be visible to the users when they look at the button.

The <button>element can be styled using the CSS properties to enhance its aesthetics. CSS properties like text-decoration, background-color, text-transform, etc. can be used in styling the button element.

<DATALIST> ELEMENT

The HTML datalist element is used to create a list of options for making a choice in a form. We use the <input> element with the <datalist> in making a drop-down list. Also, remember to note that the datalist id must be the same as the input id.

Here is an example:

<form action="#">
  <input list="country" name="Your country:">
  <datalist id="country">
      <option value="Zambia">
      <option value ="Ghana">
      <option value="Nigeria">
      <option value="Djibouti">
          </datalist>
          <input type="Submit">
          </form>

<FIELDSET> ELEMENT

In the fieldset element, we can group related data together. To label a group of related data, we use the <legend> tag for the caption.

Here is an example:

<form action="#">
    <fieldset>
     <fieldset>
        <legend>Personal Data</legend>
        <label for ="name">Names:</label>
        <input type="text" id="name" name="name" value="">
          <br>
        <label for="contact">Mobile No:</label>
        <input type="text" id="contact" name="contact" value="">
        <br>
      <label for="Email address">Email address:</label>
      <input type="text" id="Email address" name="Email address" value="">
      
    </fieldset>
    <fieldset>
    <legend>Your favorite food</legend>
    <input type="radio" id="food">
    <label for="food">Spaghetti</label>
    <br>
      <input type="radio" id="food">
    <label for="food">Broccoli soup</label>
    <br>
      <input type="radio" id="food">
    <label for="food">Cassava flakes</label>
    </fieldset>
    </fieldset>
</form>

<INPUT ELEMENT>

The input element is a very powerful attribute. It tells the web browser the type of value needed depending on the type of data to be entered. For every input tag, always use the <label> tag to caption the input type.

These are the available input type values:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

<SELECT> ELEMENT

Simply put, the select element is a list to choose from in a form.The <option> tag holds the list of all the options to pick from.

Here is an example:

<form action="#">
<label for="Colors">Choose your favorite color:</label>
<br>
<select id="colors" name="colors">
  <option value="Green">Green</option>
  <option value="Purple">Purple</option>
  <option value="Grey">Grey</option>
  <option value="Yellow">Yellow</option>
</select>
<input type="submit">
</form>

The first option "Green" will always be highlighted as the default choice. To change it to a different option, add the selected attribute to the option you want.

Here is an example:

<form action="#">
<label for="Colors">Choose your favorite color:</label>
<br>
<select id="colors" name="colors">
  <option value="Green">Green</option>
<option value="Yellow" selected>Yellow</option>
</select>
<input type="submit">
</form>

If you want the user to select more than one value, add the multiple attribute to the select tag.

Here is an example:

<form action="#">
<label for="Colors">Choose your favorite color:</label>
<br>
<select id="colors" name="colors" multiple>
  <option value="Green">Green</option>
  <option value="Purple">Purple</option>
  <option value="Grey">Grey</option>
  <option value="Yellow">Yellow</option>
<option value="Red">Red</option>
</select>
<input type="submit">
</form>

<TEXTAREA> ELEMENT

The textarea element is used to contain a long list of text. The specify how long and wide the textarea should, use the rows and cold attribute. Otherwise, use the CSS properties of width and height.

Here is an example:

<form action="#">
  <textarea name="Feedback" rows="10" cols="20">I can write as much as I want in this large textarea.</textarea>
  <br>
  <input type="submit">
</form>

To use the CSS properties of width and height:

Here is an example:

<form action="/action_page.php">
  <textarea name="Feedback" style="width:200px; height:200px;">I can write as much as I want in this large textarea.</textarea>
  <br>
  <input type="submit">
</form>

<LABEL> ELEMENT

The label element is very important for description purposes. It also helps visually impaired users read the description and provide the right information in a form. The label element has a for attribute that bears a value. The value of the for attribute in the label tag must be the same as that of the input id for a particular label to bind them together.

Here is an example:

<form>
<label for ="name"> Names:</label>
<input type="text" id="name" value="" >
</form>

HTML FORMS ATTRIBUTES

The HTML forms have their own unique attributes that help in processing the collected information on the web.

These attributes are:

1. Action
2. Autocomplete
3. Enctype
4. Method
5. Name
6. Novalidate
7. Rel
8. Target