HTML Forms

HTML Form

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

HTML forms are used to collect input from users on a webpage.
A form consists of one or more input fields, along with optional labels, instructions, and other elements.
The "<form>" tag is used to create a form in HTML. All input fields should be placed within the opening and closing tags of the "<form>" element.
The "action" attribute of the "<form>" tag specifies the URL of the server-side script that will process the form data. The "method" attribute specifies the HTTP method to use when submitting the form, typically "GET" or "POST".
Input fields can be of different types, such as text fields, radio buttons, checkboxes, select lists, and more. Each type of input field has its own attributes and properties that can be customized.
The "<label>" tag is used to provide a text label for an input field. The "for" attribute of the "<label>" tag should match the "id" attribute of the corresponding input field.
The "<input>" tag is the most common type of input field. It has several attributes, such as "type", "name", "value", "placeholder", and more.
Input fields can have default values and placeholders to provide instructions or examples to users.
Form validation can be implemented to ensure that users enter valid data in input fields. This can be done using HTML attributes or JavaScript code.
The "<button>" tag can be used to create buttons within a form, such as a "submit" button or a "reset" button.

HTML Code:

                    <form>
                    <label for="fname">First name:</label><br>
                    <input type="text" id="fname" name="fname" value="Shiwang"><br>
                    <label for="lname">Last name:</label><br>
                    <input type="text" id="lname" name="lname" value="Pandey"><br>
                    <input type="submit" value="Submit">
               </form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML ;input> element is the most used form element.

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

Here are some examples:

<input type="text"> - defines a single-line text input field
<input type="radio"> - defines a radio button
<input type="checkbox"> - defines a checkbox
<input type="submit"> - defines a submit button
<input type="button"> - defines a clickable button

The <label> Element

The HTML <label> element 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 is focused on the input element.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The <textarea> Element

The HTML <textarea> element defines a multi-line text input control.

The text area can be automatically resized, or fixed by the cols and rows attributes.

The <select> Element

The HTML <select> element defines a drop-down list.

The <option> tags inside the <select> element define the available options in the list.

The <button> Element

The HTML <button> element defines a clickable button.

The button can be a submit button or a reset button.

The <fieldset> Element

The HTML <fieldset> element is used to group related elements in a form.

The <legend> element defines a caption for the <fieldset> element.

The <datalist> Element

The HTML <datalist> element specifies a list of pre-defined options for input controls.

The list attribute of the <input> element, refers to the <datalist> element by id.

« Previous Next »