Skip to content
Learning

HTML Forms

HTML forms are used to collect user input. They allow you to gather data like text, selections, file uploads, and more, which can be submitted to a server for processing. The basic structure of a form is the <form> tag, and various input elements are used inside to define fields for users to interact with.

<!DOCTYPE html>
<html lang="en">


<head>
    <title>Html Forms</title>
</head>


<body>
    <h2>HTML Forms</h2>
    <form>
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username"><br><br>


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


        <input type="submit" value="Submit">
    </form>
</body>


</html>

Form Elements

The HTML <form> comprises several elements, each serving a unique purpose. For instance, the <label> element defines labels for other <form> elements. On the other hand, the <input> element is versatile and can be used to capture various types of input data such as text, password, email, and more simply by altering its type attribute.

The HTML <form> element can contain one or more of the following form elements:

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

<input>

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user;

<label>

The <label> HTML element represents a caption for an item in a user interface.

<select>

The <select> HTML element represents a control that provides a menu of options.

<textarea>

The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text

<button>

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

<fieldset>

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.

<legend>

The <legend> HTML element represents a caption for the content of its parent <fieldset>.

<datalist>

The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

<output>

The <output> HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

<option>

The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.

<optgroup>

The <optgroup> HTML element creates a grouping of options within a <select> element.