Bài
này mô tả các kiểu nhập liệu khác nhau trong thẻ
<input>.
Kiểu nhập liệu văn bản
<input
type="text"> xác định 01 vùng nhập liệu có 01
dòng:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Đây
là hình ảnh hiển thị trên trình duyệt:
Kiểu nhập liệu Password
<input
type="password"> xác
định 01 ô 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>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Trên
trình duyệt đoạn mã trên sẽ hiển thị như sau:
User
name:
User password:
User password:
The
characters in a password field are masked (shown as asterisks or
circles).
Kiểu nhập liệu Submit
<input
type="submit"> xác
định 01 nút để gửi dữ liệu đến trang xử lý.
Trang
xử lý thông thường là 01 trang đặt trên máy chủ có 01
đoạn mã xử lý dữ liệu của form.
Trang
xử lý được xác định trong thuộc tính action.
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>
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>
Sau
đây là hình ảnh trên trình duyệt:
Nếu
ta không nhập gì vào thuộc tính value của thẻ submit, thì
nút sẽ lấy 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">
</form>
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">
</form>
Kiểu nhập liệu Reset
<input
type="reset"> xác
định 01 nút reset
sẽ
reset tất cả giá trị trong form về 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>
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>
Sau
đây là hình ảnh hiển thị trên trình duyệt:
Kiểu nhập liệu Radio
<input
type="radio"> xác
định 01 nút radio.
Các
nút Radio cho phép người dùng chọn lựa chỉ 01 trong số
các tùy chọ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 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>
Sau
đây là hình ảnh hiển thị trên trình duyệt:
Kiểu nhập liệu Checkbox
<input
type="checkbox"> xác
định 01 checkbox.
Các
checkbox cho phép người dùng không chọn gì cả hoặc nhiều
chọn lựa trong số các tùy chọn.
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>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car </form>
Sau
đây là hình ảnh hiển thị trên trình duyệt:
I
have a bike
I have a car
I have a car
Kiểu nhập liệu Button
<input
type="button"> xác
định 01 nút nhấn.
Ví dụ:
<input type="button" onclick="alert('Xin
chào!!')" value="Bấm
vào đây!!">
Sau
đây là hình ảnh hiển thị trên trình duyệt:
Các kiểu nhập liệu trong HTML5
HTML5
bổ sung 01 vài kiểu nhập liệu mới:
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
Các
kiểu nhập liệu mới không được các trình duyệt đời
cũ hỗ trợ sẽ chuyển sang hiển thị dạng nhập liệu
text <input type="text">.
Kiểu nhập liệu Số
Thẻ
<input
type="number"> xác
định 01 ô nhập liệu kiểu số.
Bạn
cũng có thể thiết lập giới hạn các con số được
phép nhập.
Ví
dụ sau hiển thị 01 ô nhập số , nơi bạn có thể nhập
từ 1 đến 5.
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Giới hạn giá trị nhập liệu
Đây
là danh sách 01 vài thuộc tính dùng để giới hạn dữ
liệu nhập (bao gồm cả HTML5):
Thuộc tính
|
Mô tả
|
|---|---|
disabled
|
Xác định rằng
01 ô nhập liệu sẽ bị vô hiệu.
|
max
|
Xác định giá
trị tối đa cho ô nhập liệu.
|
maxlength
|
Xác định độ
dài ký tự tối đa cho ô nhập liệu.
|
min
|
Xác định giá
trị nhỏ nhất cho ô nhập liệu.
|
pattern
|
Xác định 01
biểu thức để kiểm tra giá trị nhập vào 01 lần
nữa.
|
readonly
|
Xác định 01 ô
nhập liệu chỉ đọc (không thể thay đổi)
|
required
|
Xác định rằng
01 ô nhập liệu là bắt buộc (phải điền vào)
|
size
|
Xác định bề
rộng của 01 ô nhập liệu (tính bằng số ký tự)
|
step
|
Xác định số
bước nhảy cho 01 ô nhập liệu.
|
value
|
Xác định giá
trị mặc định của ô nhập liệu.
|
Chúng ta sẽ học thêm về các giới hạn nhập liệu trong bài tiếp theo.
Ví
dụ sau hiển thị 01 ô nhập số , nơi bạn có thể nhập
từ 0 đến 100, bước nhảy là 10.
Giá trị mặc định là 30.
Giá trị mặc định là 30.
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Kiểu nhập liệu Ngày Tháng
Thẻ
<input
type="date"> được dùng để nhập ngày tháng.
Tùy
thuộc vào trình duyệt hỗ trợ, 01 đối tượng date
picker có thể hiện ra để nhập liệu.
Ví dụ:
<form>
Birthday:
<input type="date" name="bday">
</form>
Birthday:
<input type="date" name="bday">
</form>
Bạn
cũng có thể giới hạn khoảng ngày tháng nhập liệu.
Ví dụ:
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Kiểu nhập liệu Bảng màu
Thẻ
<input
type="color"> được dùng để nhập liệu màu
sắc.
Tùy
thuộc vào trình duyệt hỗ trợ, 01 đối tượng color
picker sẽ hiện ra cho người sử dụng chọn.
Ví dụ:
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Kiểu nhập liệu dãy các giá trị
Thẻ
<input
type="range"> được dùng để nhập 01 giá trị
trong 01 khoảng nào đó.
Tùy
thuộc vào trình duyệt hỗ trợ, 01 đối trượng dạng
thanh trượt sẽ được hiển thị cho người dùng thao
tác.
Ví dụ:
<form>
<input type="range" name="points" min="0" max="10">
</form>
<input type="range" name="points" min="0" max="10">
</form>
Bạn
cũng có thể sử dụng các thuộc tính giới hạn dữ
liệu: min, max, step, value.
Kiểu nhập liệu Tháng
Thẻ
<input
type="month"> cho phép người dùng chọn 01 tháng
trong năm.
Tùy
thuộc vào trình duyệt hỗ trợ, 01 đối tượng date
picker sẽ hiển ra cho người dùng chọn tháng.
Ví dụ:
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Kiểu nhập liệu Tuần
Thẻ
<input
type="week"> cho phép người dùng chọn 01 tuần
trong năm.
Tùy
thuộc vào trình duyệt hỗ trợ, 01 đối tượng date
picker sẽ hiển thị cho người dùn g chọn.
Ví dụ:
<form>
Select a week:
<input type="week" name="week_year">
</form>
Select a week:
<input type="week" name="week_year">
</form>
Kiểu nhập liệu Giờ
Thẻ
<input
type="time"> cho phép người dùng chọn thời gian
(không có múi giờ).
Tùy
thuộc vào trình duyệt hỗ trợ, 01 đối tượng time
picker sẽ hiển thị để người dùng thao tác.
Ví dụ:
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Select a time:
<input type="time" name="usr_time">
</form>
Kiểu nhập liệu Datetime-local
Thẻ
<input
type="datetime-local"> xác
định 01 ô nhập liệu ngày và giờ, không bao gồm múi
giờ.
Tùy
vào trình duyệt hỗ trợ, 01 đối tượng date picker sẽ
hiển thị cho người dùng chọn.
Ví dụ:
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Kiểu nhập liệu Email
Thẻ
<input
type="email"> được
dùng để nhập 01 địa chỉ mail.
Tùy
vào trình duyệt hỗ trợ, địa chỉ mail sẽ tự động
được kiểm tra tính hợp lệ khi form submit.
Vài
smartphones tự nhận biết kiểu dữ liệu email, và thêm
".com" vào bàn phím nhập liệu.
Ví dụ:
<form>
E-mail:
<input type="email" name="email">
</form>
E-mail:
<input type="email" name="email">
</form>
Kiểu nhập liệu Search
Thẻ
<input
type="search"> được dùng cho ô tìm kiếm
(01 ô tìm kiếm được hiển thị như là 01 ô văn bản
thông thường).
Ví dụ:
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Search Google:
<input type="search" name="googlesearch">
</form>
Kiểu nhập liệu Số điện thoại
Thẻ
<input
type="tel"> được dùng để nhập số điện
thoại.
Thẻ
này hiện nay chỉ được hỗ trợ bởi trình duyệt Safari
8.
Ví dụ:
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Telephone:
<input type="tel" name="usrtel">
</form>
Kiểu nhập liệu Url
Thẻ
<input
type="url"> được dùng để nhập điạ chỉ
URL.
Tùy
thuộc vào trình duyệt hỗ trợ, giá trị url có thể tự
động được kiểm tra tính hợp lệ khi form submit.
Vài
smartphones tự nhận biết kiểu url, và tự thêm ".com"
vào bàn phím nhập liệu.
Ví dụ:
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Add your homepage:
<input type="url" name="homepage">
</form>
Tác giả : #drM
Nguồn: Sưu Tầm
cuong
Trả lờiXóa