Clear, practical technology insights BSOD Code Lookup · Windows Error Code Lookup · Wi-Fi Troubleshooting · PC Troubleshooting Checklist

Input Types of Input Elements in HTML

Understand Input Types of Input Elements in HTML with clear explanations, practical examples, and useful tips. This updated guide covers the essential...

Table of Contents

Input Types of Input Elements in HTML is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

The article introduces input data types for elements in HTML.

Text data

define input data as a single-line text field.

  Tên: 
 
 
 
  H?: 
 

Password data

field definition fills the password.

  Tên ng??i dùng: 
 
 
 
  M?t kh?u: 
 

Note: The character in the password field will be masked (with a star or a dot)

Submit form

defines the button to send the form to the form-handler, typically the home page that has the script to handle the input data and is specified by the action. attribute action. If this attribute is omitted, the submit button will show the default text.

  Tên: 
 
 
 
  H?: 
 
 
 
 

Reset input data

Define the button to refresh all values in the form to the default value.

  Tên: 
 
 
 
  H?: 
 
 
 
 


Round button data

define a circle button to select only one answer in the given answer.

  Nam 
 
  N? 
 
  Khác 
 

Checkbox data

Defines the checkbox, allowing users to not select or select multiple answers

  Tôi có xe ??p 
 
  Tôi có ô tô 
 

. Button type data

button definition.

Input data of HTML5

HTML5 also added some other input data types (old browsers do not support them, they will work as ) including:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • URL
  • week

Input data color

used to fill the input field of the input data. Depending on the browser, the palette will appear.

  Ch?n màu yêu thích c?a b?n: 
 

Date data

Date field definition. Depending on the browser, the date selection tool will be displayed.

  Ngày sinh: 
 

You can use min and max attributes to limit dates.

  Nh?p ngày tr??c 1980-01-01: 
 
 
  Nh?p ngày sau 2000-01-01: 
 
 

Data as local time and date

define the date and time in the data field, not the time zone. Depending on the browser, the date and time selection tool will be displayed.

  Sinh nh?t (ngày và gi?): 
 

Email data

define input data as email address. Depending on whether the browser supports, the address is automatically verified. Some smartphones recognize email and add '.com' to the keyboard.

  E-mail: 
 

Data is file

Define the file selection and the 'Browse' button to select the file and upload it.

  Ch?n t?p tin: 
 

Month data

Allows users to select months and years. Depending on the supported browser, the date picker will appear.

  Sinh nh?t (tháng và n?m): 
 

Digital data

Defining numerical data fields, can limit approved numbers. the example below shows the number input field, which takes values from 1 to 5.

  S? l??ng (t? 1 t?i 5): 
 

Limit input data

Below is a list of some of the input limit attributes, marked with * as new HTML5 attributes.

Description property disabled disable max data field * maximum value of maxlength data field maximum number of min data fields * minimum value of pattern data field * first value check expression entering readonly specifies that the data field can only be read (cannot be changed) required * data field is required (must be filled) size width (in characters) of step * valid distance between fields value of the data field value the default value of the data field

the example below shows a numeric data field that can enter 0 to 100, values separated by 10 units, default value 30.

  S? l??ng: 
 

Data in a span

define when the correct value does not matter, such as using a slider. The default value is in the range of 0 to 100. You can choose a range by the min, max and step. attributes step.

Search field data

used to define search fields (like text input fields).

  Tìm ki?m trên Google: 
 

Data as a phone number

used to enter phone numbers and supported on Safari 8.

  S? ?i?n tho?i: 
 

Time data

used to select the time (not the time zone). If the browser supports it, the time picker will appear.

  Ch?n th?i gian: 
 

URL data

used for data fields with URL addresses. Depending on whether the browser supports, the address will automatically be validated. Some smartphone devices identify the URL and add '.com' to the keyboard.

  Trang ch?: 
 

The following lesson: Input element attributes in HTML

FAQ

What is Input Types of Input Elements in HTML?

The article introduces input data types for elements in HTML.

Why is Input Types of Input Elements in HTML important?

A clear understanding of Input Types of Input Elements in HTML helps you make informed decisions, avoid common mistakes, and use the relevant tools or techniques more effectively.

How should beginners approach Input Types of Input Elements in HTML?

Start with the fundamental concepts, follow the examples step by step, and test each change in a safe environment before applying it to important systems or data.

Discussion

Reader Comments 0

Sign in with email or Google to join the discussion.