- Introduction To HTML
- HTML Elements And Tags
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Forms
The Form Element
The HTML <form>
element is utilised to create an HTML input form:
.
form elements
.
</form>
The
<form>
element is a container for various input elements, including text fields, checkboxes, radio buttons, and submit buttons, among others.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:
Type | Description |
---|---|
<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">
; element defines a single-line text input field.
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
The Label Element
Observe the use of the <label>
element in the preceding example.
The <label>
tag defines a label for many form elements.
The <label>
element is advantageous for screen-reader users, as the screen-reader will read the label aloud when the user focuses on an input element.
The <label>
element also aids users who have trouble clicking on very small regions (such as radio buttons or checkboxes), as clicking the text within the <label>
element toggles the radio button/checkbox.
The for attribute of the <label>
tag must equal the id attribute of the <input>
element in order to bind the two elements together.
Radio Buttons
The <input type="radio">
element represents a radio button.
A radio button allows the user to choose ONE of a limited number of options.
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
</body>
</html>
Checkboxes
The <input type="checkbox">
element represents a checkbox.
Checkboxes allow users to select ZERO or MORE options from a limited selection.
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Submit Button
The <input type="submit">
element specifies a button for sending form data to a form-handler.
Typically, the form-handler is a file on the server that contains a script for processing input data.
The form's action attribute specifies the form-handler.
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
The Name Attribute For Input
Each required input field must have a name attribute before it can be submitted.
If the name attribute is missing, the input field's value will not be transmitted at all.
<html>
<body>
<h2>The name Attribute</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.</p>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP