Form-related tags

This article explains form-related tags.

This explains various form fields such as text inputs and dropdown menus.

YouTube Video

Form-related tags

<form> tag

1<form action="/submit" method="post">...</form>

• The <form> tag is used to define the entire form.
• The action attribute specifies the destination, and the method attribute specifies the method (GET or POST).
• You can also specify the target attribute, similar to the <a> tag.

<input> tag (text input field)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> creates a single-line text input field. Users can enter any text.

• The placeholder attribute specifies descriptive text that appears when the input field is empty. This helps users easily understand the expected input. This text automatically disappears when input begins.

  • placeholder is suitable for providing supplementary information and is not suitable for important instructions such as required input. In such cases, you should use a label.

<input> tag (password input field)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> creates a field for password input. The entered characters are hidden and masked to ensure security.

<input> tag (email address input field)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> creates a field for entering an email address and includes validation to ensure the correct email format.

<input> tag (checkbox)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> creates a checkbox. When multiple options are available, users can select multiple items.

<input> tag (radio button)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> creates a radio button that allows users to select only one option from a set.

<input> tag (submit button)

1<input type="submit" value="Submit">

• <input type="submit"> creates a button for submitting the data in the form.
• The value of the value attribute is included in the form data when submitted.

<input> tag (Reset Button)

1<input type="reset" value="Reset">

• <input type="reset"> creates a button that resets all input values in the form.

<input> tag (hidden field)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> creates a hidden field that is not displayed on the screen and is used to send data to the backend when the form is submitted.

<input> tag (color picker)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> displays a color picker and creates an input field for users to select a color.

<input> tag (date input field)

1<input type="date" name="birthday">

• <input type="date"> creates a date input field that displays a calendar for selecting a date.

<input> tag (time input field)

1<input type="time" name="appointment_time">

• <input type="time"> creates a field for entering time, and a time picker is displayed.

<input> tag (file input field)

1<input type="file" name="resume">

• <input type="file"> creates an input field for users to select and upload files.
• The enctype attribute of the form tag must be set to multipart/form-data.

<input> tag (number)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> creates a number input field that allows setting the minimum value, maximum value, and step (increment/decrement amount).

<input> tag (range selection field for numbers)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> creates an input field where users can select a value within a range using a slider.

<textarea> tag

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• The <textarea> tag creates a multi-line text input field. It is suitable for entering long text or comments.

<select> tag

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• The <select> tag creates a dropdown menu, and options are defined with the <option> tag. Users can select one or multiple items.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• To enable multiple selections, add the multiple attribute. Specifying this attribute displays the options as a list box.

<optgroup> tag

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• The <optgroup> tag is used to group related items together. The label attribute allows you to set a group name, providing clear options to users even if the list is long.

<label> tag

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• The <label> tag defines labels for input fields, checkboxes, and radio buttons, improving usability and accessibility.
• For example, clicking a label can focus an input field or toggle a checkbox on or off.

<fieldset> tag

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• The <fieldset> tag groups related form controls, and the <legend> tag provides a title for the group.

<button> tag

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• The <button> tag defines a clickable button that triggers form submission or other actions.

  When type="button" is specified, it functions as a regular button. Clicking it does not submit the form or trigger any other default actions. It is used when you want to set custom actions with JavaScript.

  When type="submit" is specified, it functions as a submit button for the form. When this button is clicked, the form containing it will be submitted.

  When type="reset" is specified, it functions as a reset button for the form. Clicking it will reset all the input fields in the form and return them to their initial state.

  If the type attribute is not specified, some browsers may treat it as type="submit", so it is recommended to explicitly specify the type to ensure the intended behavior.

• The <button> tag can include other HTML content between the opening and closing tags, making it possible to create buttons with icons or complex text.

• For a submit button using the <input> tag, the value of the value attribute is included in the form data, but with a <button> tag, it is not sent by default.

  By specifying name and value attributes for a <button> tag, its value can be sent as form data.

<datalist> tag

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• The <datalist> tag provides a list of selectable options for the <input> element. Users can either select from the list or enter their own value.

<output> tag

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• The <output> tag displays the result of calculations or user interactions. It is used to dynamically display calculation results within forms or scripts.
• For the for attribute, specify the IDs of the form elements you want to associate, separated by spaces.

<progress> tag

1<progress value="70" max="100">70%</progress>

• The <progress> tag shows users the progress of a task. For example, it can visually indicate the progress of a file download or installation.

<meter> tag

1<meter value="0.6">60%</meter>

• The <meter> tag represents a numeric measurement within a known range. It is used to display measurements like disk usage or a fuel gauge within a specific range.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video