- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <input> Tag
An essential form control for gathering user input on web sites is the HTML <input> tag. It can have different types and attributes, like text, passwords, checkboxes, and radio buttons. When a form is submitted, the name attribute identifies the input, while the id attribute enables CSS and JavaScript manipulation.
Input elements are an essential part of web development because they facilitate the collection and submission of user data when contained within a <form> element.
Syntax
Following is the syntax for HTML <input> tag −
<input type = ".."/>
Specific Attributes
The HTML <select > tag also supports the following additional attributes −
S.No. | Attribute & Description |
---|---|
1 | accept Specifies a comma-separated list of content types that the server accepts. |
2 | alt This specifies text to be used in case the browser/user agent can't render the input control. |
3 | autocomplete Specifies for enabling or disabling of autocomplete in <input> element |
4 | autofocus Specifies that <input> element should automatically get focus when the page loads |
5 | checked If type = "radio" or type = "checkbox" it will already be selected when the page loads. |
6 | disabled Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
7 | form Specifies one or more forms |
8 | formaction Specifies the URL of the file that will process the input control when the form is submitted |
Example
In the following program, we are using HTML <input> tag to create an input field to take input from users. We are using the type="text" attribute to accept text input.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML input tag</title> </head> <body> <!--create input tag--> <form> Enter name: <input type="text" placeholder="Name"> </form> </body> </html>
When we run the above code, it will generate an output consisting of the input field displayed on the webpage.
Example
Considering the another scenario, where we are going to use the min and max attributes.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML input tag</title> </head> <body> <!--create input tag--> <form> Enter number: <input type="number" min="1" max="50" placeholder="Number between 1 to 50"> </form> </body> </html>
On running the above code, the output window wil pop up displaying the input field used with min and max attribute on the webpage.
Example
In this program, we are creating input fields type = "checkbox" and "radio" using the <input> tag within the form to allow users to select the value by checking the fields.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML input tag</title> </head> <body> <!--create input tag--> <form> Choose you know: <br> HTML <input type="checkbox"> CSS <input type="checkbox"> JavaScript <input type="checkbox"> Angular <input type="checkbox"> <br> Gender: <br> Male <input type="radio" name='gender' value='male'> Female <input type="radio" name='gender' value='femlae'> </form> </body> </html>
When we run the above code, it will generate an output consisting of the checkboxes and radio buttons on the webpage.
Example
Let's look at the following example, where we are going to use the input tag with the disabled attribute.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML input tag</title> <style> input { width: 300px; height: 30px; background-color: rgb(123, 7, 146); color: rgb(227, 210, 210) } </style> </head> <body> <!--create input tag--> <form> Disabled field: <input type="text" value="Disabled" disabled> </form> </body> </html>
On running the above code, the output window will pop up displaying the input field that is used with the disabled attribute on the webpage.
Example
Following is the example, where we are going to use the input type="date" along with a required attribute.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML input tag</title> <style> input { width: 300px; height: 30px; background-color: rgb(100, 99, 103); color: rgb(245, 241, 241) } </style> </head> <body> <!--create input tag--> <form> Select date: <input type="date" value="Disabled" required> <button>Submit</button> </form> </body> </html>
When we run the above code, it will generate an output consisting of the inputfield used with required attribute. when the user tries to submit the form it throws an error.
To Continue Learning Please Login
Login with Google