DEV Community

Cover image for Day-5 of Learning HTML
Rakshambika
Rakshambika

Posted on

Day-5 of Learning HTML

#vscode #career #productivity #webdev

This is my Day 5 of HTML Learning Journey. Today, I learned about the FORM in HTML.

WHAT IS FORM?

  1. Form in HTML is used to collect the data from the user.
  2. Using the <form> tag, we can get the different type of data from the user.
  3. HTML Form are one of the most important element in the web development.
  4. They are widely used in websites for user registration, login , feedback, surveys, contact details and many other purposes.
  5. Over 85% of websites uses form to get the user data.

Syntax:

<form>
...
...
</form>

Elements in Form:

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

Let's explorer the Elements one by one

<input>:

  • The input tag is used to create a input field, where the user can enter their data.
  • In the input field user can enter the data based on the type attribute of the <input> tag.
  • There many input types are available: text, email, password, tell, number, date-time, date, datetime-local, month ...., 
<input id="username" name="U-name" type="text">
Enter fullscreen mode Exit fullscreen mode

<label>:

  • The label tag is used to provide a description about the input field.
  • It is useful for the user to know about the input field, which is helpful for them to enter the correct data. 
<label for="username">Username</label>
Enter fullscreen mode Exit fullscreen mode

Output:

<textarea>:

  1. textarea is used to get a multi-line input from the user.
  2. In <textarea>, we can also adjust the height and width of the input field using the cols and rows attribute. 
<label>Address</label>
<textarea name="address"></textarea>
Enter fullscreen mode Exit fullscreen mode

<optgroup>

  1. optgroup is used to group the options in the <select> / dropdown list.

  2. label attribute is used to provide the title for the grouped options.

<label>Courses</label>
    <select name="courses" none>
        <optgroup label="Frontend">
            <option value="react">React</option>
            <option value="Angular">Angular</option>
        </optgroup>

        <optgroup  label="Backend">
            <option value="Node.js">Node.js</option>
            <option value="Spring Boot">Spring Boot</option>
        </optgroup>
    </select>
Enter fullscreen mode Exit fullscreen mode

<button>:

  1. button tag is used to create a clickable button on the webpage.

  2. Mainly there are two types Reset button and Submit button.

Types of Button:

1.Submit Button - Used to submit the data.
2.Reset Button - Used to reset the webpage.

<button type="submit">Submit</button> 
<button type="reset">Reset</button>
Enter fullscreen mode Exit fullscreen mode

<option>:

  1. option is used to create a options in the dropdown list.

  2. The <option> tag is used inisde the <select> tag.

  3. User can select one or more options from the list.

<select name="Language"> 
<option value="English">English</option> 
<option value="Tamil">Tamil</option> 
</select>
Enter fullscreen mode Exit fullscreen mode

<legend>:

  1. legend is used to provide the title to the fieldset.

  2. <legend> is used inside the <fieldset>.

<fieldset>
        <legend>List of Courses</legend>
     <label>Courses</label>
    <select name="courses" none>
        <optgroup label="Frontend">
            <option value="react">React</option>
            <option value="Angular">Angular</option>
        </optgroup>

        <optgroup  label="Backend">
            <option value="Node.js">Node.js</option>
            <option value="Spring Boot">Spring Boot</option>
        </optgroup>
    </select>
    </fieldset>
Enter fullscreen mode Exit fullscreen mode

See you in the next learning update!

Top comments (0)