Các kiểu input trong HTML

Chương này mô tả các kiểu khác nhau của phần tử <input>

Các kiểu input trong HTML

Dưới đây là danh sách các kiểu input khác nhau bạn có thể sử dụng trong HTML:

• <input type=”button”>
• <input type=”checkbox”>
• <input type=”color”>
• <input type=”date”>
• <input type=”datetime-local”>
• <input type=”email”>
• <input type=”file”>
• <input type=”hidden”>
• <input type=”image”>
• <input type=”month”>
• <input type=”number”>
• <input type=”password”>
• <input type=”radio”>
• <input type=”range”>
• <input type=”reset”>
• <input type=”search”>
• <input type=”submit”>
• <input type=”tel”>
• <input type=”text”>
• <input type=”time”>
• <input type=”url”>
• <input type=”week”>

Input kiểu văn bản

<input type=”text”> xác định trường nhập văn bản một dòng:

Ví dụ

<form> First name:<br> <input type=”text” name=”firstname”><br> Last name:<br> <input type=”text” name=”lastname”> </form>

Input kiểu password

<input type=”password”> xác định một trường nhập mật khẩu

Ví dụ

<form> User name:<br> <input type=”text” name=”username”><br> User password:<br> <input type=”password” name=”psw”> </form>

Ký tự trong input kiểu password sẽ bị che đi bằng dấu hoa thị,hoặc chấm tròn

Input kiểu submit

<input type=”submit”> xác định một nút để gửi đi dữ liệu form tới bộ xử lý form.

Bộ xử lý này thường là một trang server với những đoạn script chuyên dụng để xử lý dữ liệu đầu vào.

Bộ xử lý form được chỉ ra trong thuộc tính action của form.

Ví dụ

<form action=”/action_page.php”> First name:<br> <input type=”text” name=”firstname” value=”Mickey”><br> Last name:<br> <input type=”text” name=”lastname” value=”Mouse”><br><br> <input type=”submit” value=”Submit”> </form>

Nếu bỏ qua thuộc tính value của nút submit thì nó sẽ nhận một giá trị mặc định, tùy trình duyệt.

Input kiểu reset

<input type=”reset”> xác định một nút để reset(đặt lại) mọi giá trị của form về giá trị mặc định.

Ví dụ

<form action=”/action_page.php”> First name:<br> <input type=”text” name=”firstname” value=”Mickey”><br> Last name:<br> <input type=”text” name=”lastname” value=”Mouse”><br><br> <input type=”submit” value=”Submit”> <input type=”reset”> </form>

Input kiểu radio

<input type=”radio”> xác định một nút radio (nút tròn).

Nút radio cho phép người dùng lựa chọn một giá trị duy nhất trong danh sách cách lựa chọn giới hạn.

Ví dụ

<form> <input type=”radio” name=”gender” value=”male” checked> Male<br> <input type=”radio” name=”gender” value=”female”> Female<br> <input type=”radio” name=”gender” value=”other”> Other </form>

Input kiểu checkbox

<input type=”checkbox”> xác định một checkbox (hộp kiểm).

Ví dụ

<form> <input type=”checkbox” name=”vehicle1″ value=”Bike”> I have a bike<br> <input type=”checkbox” name=”vehicle2″ value=”Car”> I have a car </form>

Checkbox cho phép người dùng lựa chọn tùy ý trong danh sách lựa chọn (không chọn, hoặc chọn nhiều đều được)

Input kiểu button

<input type=”button”> xác định một button(nút có thể bấm)

Ví dụ

<input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”>

Các kiểu input mới trong HTML5

HTML5 có thêm nhiều kiểu input mới:

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

Các kiểu input mới không được hỗ trợ bởi những trình duyệt cũ, sẽ được xem như <input type=”text”>.

Input kiểu color

<input type=”color”> được sử dụng cho trường nhập bao gồm màu sắc.

Tùy trình duyệt hỗ trợ, một bảng chọn màu có thể được hiển thị trong trường nhập.

Ví dụ

<form> Chọn màu yêu thích của bạn: <input type=”color” name=”favcolor”> </form>

Input kiểu date

<input type=”date”> được sử dụng cho trường nhập chứa ngày.

Tùy trình duyệt hỗ trợ, một bảng chọn ngày sẽ được hiển thị trong trường nhập

Ví dụ

<form> Birthday: <input type=”date” name=”bday”> </form>

Bạn cũng có thể sử dụng thuộc tính min và max để hạn chế giá trị ngày.

Ví dụ

<form> Nhập một ngày trước 1980-01-01: <input type=”date” name=”bday” max=”1979-12-31″><br> Nhập một ngày sau 2000-01-01: <input type=”date” name=”bday” min=”2000-01-02″><br> </form>

Input kiểu datetime-local

<input type=”datetime-local”> xác định trường nhập ngày giờ, không có múi giờ.

Tùy trình duyệt hỗ trợ, trình chọn ngày sẽ được hiển thị trong trường nhập.

Ví dụ

<form> Birthday (date and time): <input type=”datetime-local” name=”bdaytime”> </form>

Note: datetime-local không hỗ trợ Firefox,Safari,IE 12 trở về trước.

Input kiểu email

<input type=”email”> được sử dụng cho trường nhập email.

Ví dụ

<form> E-mail: <input type=”email” name=”email”> </form>

Tùy trình duyệt hỗ trợ, địa chỉ email có thể được tự động xác thực khi gửi đi.

Một số smartphone nhận dạng kiểu email, và thêm “.com” vào gợi ý để khớp với input email.

Input kiểu file

<input type=”file”> xác định một trường để chọn tệp từ máy tính và một nút “Browse” để duyệt và tải tệp lên.

Ví dụ

<form> Select a file: <input type=”file” name=”myFile”> </form>

Input kiểu month

<input type=”month”> cho phép người dùng chọn tháng và năm.

Tùy trình duyệt hỗ trợ, một bảng chọn sẽ hiển thị ở trường nhập.

Ví dụ

<form> Birthday (month and year): <input type=”month” name=”bdaymonth”> </form>

Input kiểu number

<input type=”number”> xác định một trường nhập số.

Bạn cũng có thể hạn chế khoảng số được cho phép bằng thuộc tính min và max.

Ví dụ

<form> Số lượng (Từ 1 tới 5): <input type=”number” name=”quantity” min=”1″ max=”5″> </form>

Những cách để hạn chế input

Bảng tham khảo một số hạn chế phổ biến cho input

Attribute

Mô tả

disabled

Chỉ ra một input bị vô hiệu

max

Chỉ ra giá trị tối đa cho input

maxlength

Chỉ ra số ký tự tối đa cho input

min

Chỉ ra giá trị tối thiểu cho input

pattern

Chỉ ra biểu thức chính quy để kiểm tra giá trị đầu vào

readonly

Chỉ ra trường input này chỉ có thể đọc (không thể thay đổi)

required

Chỉ ra trường input này không được để trống

size

Chỉ ra độ rộng (tính bằng ký tự) của input

step

Chỉ ra khoảng cách giữa các số

value

Chỉ ra giá trị mặc định của một thẻ input

Ví dụ về một thẻ input nhập số, giá trị khoảng từ 0 tới 100, khoảng cách giữa các số là 10, giá trị mặc định là 30.

<form> Số lượng: <input type=”number” name=”points” min=”0″ max=”100″ step=”10″ value=”30″> </form>

Input kiểu range

<input type=”range”> xác định trường nhập số, mà giá trị không cần chính xác (như thanh trượt). Khoảng mặc định là 0 tới 100. Tuy nhiên bạn có thể thêm hạn chế với các thuộc tính min,max và step.

Ví dụ

<form> <input type=”range” name=”points” min=”0″ max=”10″> </form>

Input kiểu search

<input type=”search”> được sử dụng cho khung tìm kiếm (cũng giống như kiểu text).

Ví dụ

<form> Search Google: <input type=”search” name=”googlesearch”> </form>

Input kiểu tel

<input type=”tel”> được dùng cho khung nhập số điện thoại

Ví dụ

<form> Telephone: <input type=”tel” name=”phone” pattern=”[0-9]{3}-[0-9]{2}-[0-9]{3}”> </form>

Input kiểu time

<input type=”time”> cho phép người dùng chọn một thời gian (không có múi giờ).

Tùy trình duyệt hỗ trợ, một bảng chọn sẽ được hiển thị trong trường nhập này.

Ví dụ

<form> Select a time: <input type=”time” name=”usr_time”> </form>

Input kiểu url

<input type=”url”> được dùng cho trường nhập chứa địa chỉ URL.

Tùy trình duyệt hỗ trợ, trường URL có thể được xác thực tự động khi gửi đi.

Một số smartphone nhận dạng kiểu URL và thêm “.com” vào gợi ý để khớp với input kiểu url.

Ví dụ

<form> Add your homepage: <input type=”url” name=”homepage”> </form>

Input kiểu week

<input type=”week”> cho phép người dùng chọn tuần và năm.

Tùy trình duyệt hỗ trợ, một bảng chọn sẽ hiển thị trong trường nhập này.

Ví dụ

<form> Select a week: <input type=”week” name=”week_year”> </form>

Trích nguồn từ: (https://www.w3schools.com/html/html_form_input_types.asp)