Form Elements

Form Elements

An HTML form is a portion of a document that includes controls like text fields, password fields, checkboxes, radio buttons, submit buttons, menus, and so on. An HTML form allows the user to enter data such as name, email address, password, phone number, and other information that will be transmitted to the server for processing. If you want to collect information from site visitors, you'll need HTML forms.

< form> element in Html:

The HTML form element creates a document section where the user can enter information. It includes text fields, text areas, password fields, and other interactive controls for submitting data to the webserver.

  • < input>

    This is the most used element in the HTML form. The default input type is the text box.

  • < label>

    This element is used to define labels for various elements. The id/name attribute of the input element should match with the attribute of the label element to bind them together.

  • < select>

    This element can be used to define a drop-down list. The < option> element helps us to list down the available options. The first item of the drop-down list gets selected by default.

  • < textarea>

    This element helps us to input multiple lines in the form. The number of visible lines is specified by the rows attribute. The width of the text area is specified by the cols attribute.

  • < button>

    This element is used to define a clickable button.

Example No.1:

<html> <body> <h2>Knowledge2life</h2> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Knowlegde2"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Life"> </form> </body> </html>

OUTPUT:

Knowledge2life




Example No.2:

<html> <body> <h2>Knowledge2life</h2> <p>Choose your favorite Website:</p> <form>   <input type="radio" id="html" name="fav_language" value="Knowledge2life">   <label for="html">Knowledge2life</label><br>   <input type="radio" id="css" name="fav_language" value="Learning">   <label for="css">Learning</label><br>   </form> </body> </html>

OUTPUT:

Knowledge2life

Choose your favorite Website: