HTML Introduction | HTML Forms | HTML Input Element Types
Input element types
The form element can contain input elements of many types. Representative input element types often used in HTML are as follows.
- text
- password
- submit
- reset
- image
- button
- radio
- checkbox
- file
The input element types newly added in HTML5 are as follows.
- Number input (number)
- Input range selection (range)
- Color input (color)
- Date input (date)
- Time input (time)
- Date and time input (datetime-local)
- Year and month input (month)
- Year and week input (week)
- Email input (email)
- URL address input (url)
- Telephone number input (tel)
- Search term input (search)
Text input - text
If you set the type attribute value of the <input> tag to “text”, you can receive a single line of text from the user.
<form>
제목 : <input type="text" name="title">
</form>
Password input - password
If you set the type attribute value of the <input> tag to “password”, you can receive a password from the user. Because it receives a password, an asterisk (*) or small circle (•) is displayed on the screen instead of the entered letters or numbers.
<form>
사용자명 : <input type="text" name="username"><br/>
비밀번호 : <input type="password" name="password">
</form>
Submit button - submit
If you set the type attribute value of the <input> tag to “submit”, it becomes a button that submits data entered by the user to the server-side form handler.
A form handler means a server-side web page for processing entered data. The address of this form handler can be specified by using the action attribute of the form element.
<form action="/">
사용자명 : <input type="text" name="username"><br/>
<input type="submit" value="전송">
</form>
Reset button - reset
If you set the type attribute value of the <input> tag to “reset”, it becomes a button that resets the values entered by the user to their initial values.
<form action="/">
사용자명 : <input type="text" name="username" value="개발곰"><br/>
<input type="reset" value="재설정">
</form>
Image button - image
If you set the type attribute value of the <input> tag to “image”, it becomes a button that acts as a submit button and is displayed as an image.
<form action="/">
사용자명 : <input type="text" name="username"><br/>
<input type="image" src="/resources/images/logo/64x64.png">
</form>
To process a normal button, rather than a submit button, as an image, use the <img> tag and assign an action with JavaScript.
Normal button - button
If you set the type attribute value of the <input> tag to “button”, it becomes a normal button.
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
A button can also be represented with the <button> tag. Reference
Radio button - radio
If you set the type attribute value of the <input> tag to “radio”, the user can select only one option from multiple options.
To send the correct input to the server, all input elements must have the same name attribute.
<input type="radio" name="fruit" value="apple" checked> 사과
<input type="radio" name="fruit" value="banana"> 바나나
<input type="radio" name="fruit" value="orange"> 오렌지
<input type="radio" name="fruit" value="strawberry"> 딸기
Checkbox - checkbox
If you set the type attribute value of the <input> tag to “checkbox”, the user can select multiple options from several options.
Unlike radio buttons, checkboxes can receive several options at once. To send the correct input to the server, all input elements must have the same name attribute.
<input type="checkbox" name="fruit" value="apple" checked> 사과
<input type="checkbox" name="fruit" value="banana"> 바나나
<input type="checkbox" name="fruit" value="orange"> 오렌지
<input type="checkbox" name="fruit" value="strawberry"> 딸기
File selection - file
If you set the type attribute value of the <input> tag to “file”, you can send a file.
<input type="file" name="imageFile" accept="image/*">
Number input
If you set the type attribute value of the <input> tag to “number”, the input element lets the user enter a number.
The difference between the number type and the normal text type is that up and down buttons for adjusting the number appear on the right side of the input field. Depending on browser support, you can also set limits on number selection by using the min and max attributes.
<input type="number" name="num" min="1" max="9">
The number type is not supported in Internet Explorer 9 and earlier.
Input range selection
If you set the type attribute value of the <input> tag to “range”, the input element lets the user enter only a value within a certain range.
Depending on browser support, it displays a horizontal slider for selecting a value.
0 <input type="range" name="favnum" min="1" max="9"> 9
The range type is not supported in Internet Explorer 9 and earlier.
Color input
If you set the type attribute value of the <input> tag to “color”, the input element lets the user enter a color.
The selected color is sent as a six-digit hexadecimal color value without the #. Depending on browser support, it displays a tool for selecting a color.
<input type="color" name="color" value="#FF0000">
The color type is not supported in Safari 9.1 and earlier, or Internet Explorer 11 and earlier.
Date input
If you set the type attribute value of the <input> tag to “date”, the input element lets the user enter a date.
Depending on browser support, it displays a calendar for selecting a date.
<input type="date" name="day1">
You can also use the min and max attributes to set limits on date selection.
<input type="date" name="day2" min="1977-01-01" max="2020-12-31">
The date type is not supported in Firefox, Internet Explorer 11, and earlier versions.
Time input
If you set the type attribute value of the <input> tag to “time”, the input element lets the user enter a time.
Depending on browser support, it displays a tool for selecting a time.
<input type="time" name="time">
The time type is not supported in Firefox, Internet Explorer 12, and earlier versions.
Date and time input - datetime-local
If you set the type attribute value of the <input> tag to “datetime-local”, the input element lets the user enter a date and time.
Depending on browser support, it displays a calendar for selecting a date and a tool for selecting a time.
<input type="datetime-local" name="time">
The datetime-local type is not supported in Firefox, Internet Explorer 12, and earlier versions.
Year and month input - month
If you set the type attribute value of the <input> tag to “month”, the input element lets the user enter a year and month.
Depending on browser support, it displays a calendar for selecting a year and month.
<input type="month" name="month">
The month type is not supported in Firefox, Internet Explorer 11, and earlier versions.
Year and week input - week
If you set the type attribute value of the <input> tag to “week”, the input element lets the user enter a year and week number.
Depending on browser support, it displays a calendar for selecting a year and week.
<input type="week" name="week">
The week type is not supported in Firefox, Internet Explorer 11, and earlier versions.
Email input
If you set the type attribute value of the <input> tag to “email”, the input element lets the user enter an email address.
Depending on browser support, it automatically checks whether the entered email address is valid when submitted.
<input type="email" name="email">
The email type is not supported in Safari, Internet Explorer 9, and earlier versions.
URL address input
If you set the type attribute value of the <input> tag to “url”, the input element lets the user enter a URL address.
Depending on browser support, it automatically checks whether the entered URL address is valid when submitted.
<input type="url" name="url">
The url type is not supported in Safari, Internet Explorer 9, and earlier versions.
Telephone number input
If you set the type attribute value of the <input> tag to “tel”, the input element lets the user enter a telephone number.
<input type="tel" name="tel">
The tel type is supported only in Safari 8.
Search term input
If you set the type attribute value of the <input> tag to “search”, the input element lets the user enter a search term. This search field works the same as a normal text field.
The difference between the search type and the normal text type is that when a search term is entered in the input field, an X mark appears on the right side of the input field so the entered search term can be deleted immediately.
<input type="search" name="keyword">