HTML Form Input Types
HTML Form Input Types
An important element of the HTML form is < input type= "> in HTML. The type attribute of the input element can be of different types, which defines the information field. For example, < input type="text "name="name" > gives a text box.
The following is a list of all types of HTML element < input>.
| Type=“ ” | Description |
| password | Define the input field of a single line password. |
| radio | Defines a radio button that allows one of the choices to be selected. |
| reset | Defines a reset button in the form to restore all the values. |
| checkbox | Defines checkboxes that allow multiple options of type to be selected. |
| button | Define a basic push button which can be programmed to accomplish an event mission. |
| file | Defines the file to be picked from system storage. |
| image | Sets a graphic submission button. |
| submit | Defines the button to submit the form to the server. |
| text | Defines a single-line text input field |
HTML5 has introduced new styles on the element < input>. Below is a list of types of HTML5 elements
| Type | Description |
| Color | Define a common color field for the data. |
| Date | Defines the input field for the selection of dates. |
| datetime-local | Defines an input field for entering a date without a time zone. |
| Defines an entry field for an email address to enter. | |
| Month | Define a rule for the month and year, without time zone. |
| Number | Sets a field input for entering a number. |
| url | Sets a field to access URL |
| Week | Defines a area with week-year, without time zone to reach the year. |
| Search | Defines the text field of a single line to enter a search string. |
The definition with examples of types of < input > elements follows.
1. <input type="password">:
The "password" form feature < input > enables a user to safely enter the password in a web page. The password-filed text entered is translated to "*" or.", "so that another person can't read it.
Example:
<form> <label>Enter User name</label><br> <input type="text" name="name"><br> <label>Enter Password</label><br> <input type="Password" name="password"><br> <br><input type="submit" value="submit"> </form>
Output:
2. <input type="submit">:
The "submit" type item < input > specifies a submit button when the "press" event occurs to submit the form to the server.
Example
<form> <label>Enter User name</label><br> <input type="text" name="firstname"><br> <label>Enter Password</label><br> <input type="Password" name="password"><br> <br> <input type="submit" value="submit"> </form>
Output
Upon clicking the submit button, the form will be submitted to the server and the page will be redirected to the action value.
3. <input type="text">:
The "text" type element < input > is used to define a text field in a single line.
Example:
<form> <label>Enter first name</label><br> <input type="text" name="firstname"><br> <label>Enter last name</label><br> <input type="text" name="lastname"><br> <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p> </form>
Output:
4. <input type="radio">:
The radio buttons are specified by the < input > type "radio" which allows choosing an option between collections of related options. Only one radio-button option at a time can be selected.
Example:
<form> <p>Kindly Select your favorite color</p> <input type="radio" name="color" value="purple"> purple <br> <input type="radio" name="color" value="green"> green <br> <input type="radio" name="color" value="pink"> pink <br> <input type="radio" name="color" value="blue"> blue <br> <input type="submit" value="submit"> </form>
Output:
5. <input type="reset">:
The < input > type "reset" is often known as a button, but when the user performs a click event, the default is to reset all input values.
Example:
<form> <label>User id: </label> <input type="text" name="user-id" value="user"> <label>Password: </label> <input type="password" name="pass" value="pass"><br><br> <input type="submit" value="login"> <input type="reset" value="Reset"> </form>
Output:
6. <input type="checkbox">:
The < input > form "checkbox" is shown as square boxes that can be checked or unchecked to pick a choice from a given selection.
Example:
<form> <label>Enter your Name:</label> <input type="text" name="name"> <p>Kindly Select your favourite sports</p> <input type="checkbox" name="sport1" value="football">Football<br> <input type="checkbox" name="sport2" value="badminton">Badminton<br><br> <input type="checkbox" name="sport3" value="tennis">Tennis<br> <input type="checkbox" name="sport4" value="cricket">Cricket<br> <input type="checkbox" name="sport5" value="baseball">Baseball<br> <input type="submit" value="submit"> </form>
Output:
7. <input type="button">:
The < input > type "button" describes a simple push button that can be programmed to control any event, such as clicking an action.
<form> <input type="button" value="Clcik me " onclick="alert('you are learning HTML')"> </form>
Output:
8. <input type="file">:
The < Input > file type element is used to select one or more files from the storage device of the user. If the file is selected and uploaded, it can be uploaded to the server using the JS code and file API.
Example:
<!DOCTYPE html> <html> <body> <h2>Input "file" type.</h2> <p>We can choose any type of file until we do not specify it! The selected file will appear at next to "choose file" option</p> <form> <label>Select file to upload:</label> <input type="file" name="newfile"> <input type="submit" value="submit"> </form> </body> </html>
Output:
9. <input type="image">:
The "image" type < input > is used in file form to represent a submit button.
Example:
<!DOCTYPE html> <html> <body> <h2>Input "image" type.</h2> <p>We can create an image as submit button</p> <form> <label>User id:</label><br> <input type="text" name="name"><br><br> <input type="image" alt="Submit" src="login.png" width="100px"> </form> </body> </html>
Output:
HTML5 newly added <input> types element
1. <input type="color">:
The < input > type "color" is used to define an input field containing a color. It allows the user to specify the color on the browser using visual color interface.
Example:
<form> Pick your Favorite color: <br><br> <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br> <input type="color" name="downclick" value="#f5f5dc"> Downclick </form>
Output:
2. <input type="date">:
The < input > element of type "date" generates an input field, which allows the user to enter a date in a given format. You can enter a date by text field or by date picker interface.
Example:
<form> Select Start and End Date: <br><br> <input type="date" name="Startdate"> Start date:<br><br> <input type="date" name="Enddate"> End date:<br><br> <input type="submit"> </form>
Output:
3. <input type="datetime-local">:
The < input > element of the type "datetime-local" creates an input filed that allows the user to select the date as well as the local time in the hour and minute without time zone information.
Example:
<form> <label> Select the meeting schedule: Select date & time: <input type="datetime-local" name="meetingdate"><br><br> </label> <input type="submit"> </form>
Output:
4. <input type="email">:
The < input > type "email" creates an input filed that allows the user to enter an e-mail address with a pattern validation. Multiple attributes make it possible for a user to enter more than one email address.
Example:
<form> <label><b>Enter your Email-address</b></label> <input type="email" name="email" required> <input type="submit"> <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p> <label><b>Enter multiple Email-addresses</b></label> <input type="email" name="email" multiple> <input type="submit"> </form>
Output:
5. <input type="month">:
The < input > type "month" creates an input field that allows the user to easily enter month and year in the "MM, YYYY" format where MM defines the value of the month and YYYY defines the value of the year.
Example:
<form> <label>Enter your Birth Month-year: </label> <input type="month" name="newMonth"> <input type="submit"> </form>
Output:
6. <input type="number">:
The < input > element type number generates an input field that allows the user to enter a numeric value. You can also restrict yourself to enter the minimum and maximum values using the min and max attributes.
Example:
<form> <label>Enter your age: </label> <input type="number" name="num" min="50" max="80"> <input type="submit"> </form>
Output:
7. <input type="url">:
The < input > element of the type "url" creates an input filed that enables the user to enter the URL.
Example:
<form> <label>Enter your website URL: </label> <input type="url" name="website" placeholder="http://example.com"><br> <input type="submit" value="send data"> </form>
Output:
8. <input type="week">:
Form week < input > creates an input field that allows a user to pick a week and year without time zone in the drop-down calendar.
Example:
<form> <label><b>Select your best week of year:</b></label><br><br> <input type="week" name="bestweek"> <input type="submit" value="Send data"> </form>
Output:
9. <input type="search">:
The "search" form <input> generates a filed input which enables a user to enter a search string. They are functionally symmetrical to the form of text input but may be different in style.
Example:
<form> <label>Search here:</label> <input type="search" name="q"> <input type="submit" value="search"> </form>
Output:
