HtmlCssMonk

Forms in HTML | Learn Basic HTML

agree, english, consent

DESCRIPTION

HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of information such as username, password, contact number, email id etc. There are various form elements available like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

HTML forms are required if you want to collect some data of the site visitor.

HTML Form tags

TagDescription
<form>It defines an HTML form to enter inputs by the used side.
<input>It defines an input control.
<textarea>It defines a multi-line input control.
<label>It defines a label for an input element.
<fieldset>It groups the related element in a form.
<legend>It defines a caption for a <fieldset> element.
<select>It defines a drop-down list.
<optgroup>It defines a group of related options in a drop-down list.
<option>It defines an option in a drop-down list.
<button>It defines a clickable button.

<form>

HTML <form> tag is used to create an HTML form . It’s syntax is –  

<form>  
//Form elements  
</form>  

NOTE – The HTML form does not itself create a form but it acts as a container for required form elements , such as <input> , <label> etc.

<input>

The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user.

EXAMPLE –

<body>  
  <form>  
     Enter your favourite movie  <br>  
    <input type="text" name="username">  
  </form>  
</body>  

This Code will produce the following result on your webpage –


An <input> element can be displayed in many ways, depending on the type attribute.

TypeDescription
<input type=”text”>Displays a single-line text input field
<input type=”radio”>Displays a radio button (for selecting one of many choices)
<input type=”checkbox”>Displays a checkbox (for selecting zero or more of many choices)
<input type=”submit”>Displays a submit button (for submitting the form)
<input type=”button”>Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

Example –

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

This Code will produce the following result on your webpage –


Password Fields

The <input type="password"> defines a invisible to user text field for text input.

Example –

<form>
    Password: <br>
    <input type="password" id="password" name="password" /> <br />
  </form>

This Code will produce the following result on your webpage –


<textarea>

The <textarea> defines a multiple-line input field for text input.

Example –

 <form>
    Enter your address:<br>
    <textarea rows="2" cols="20"></textarea>
  </form>

This Code will produce the following result on your webpage –


<label>

The <label> tag defines a label for many form elements. The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

Example –

<form>
    <label for="firstname">First Name: </label> <br />
    <input type="text" id="firstname" name="firstname" /> <br />
    <label for="lastname">Last Name: </label> <br>
    <input type="text" id="lastname" name="lastname" /> <br />
  </form>

This Code will produce the following result on your webpage –


Next topic – Anchor in HTML

Previous topic – Lists in HTML


Leave a Comment

Your email address will not be published. Required fields are marked *