Thẻ input trong HTML
Thuộc tính type trong thẻ input Bài này sẽ đề cập đến tất cả các giá trị của thuộc tính type trong thẻ input. Kiểu text tạo ra một dòng giúp người dùng nhập liệu:
Thuộc tính type trong thẻ input
Bài này sẽ đề cập đến tất cả các giá trị của thuộc tính type trong thẻ input.
Kiểu text
<input type=”text”> tạo ra một dòng giúp người dùng nhập liệu:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<form>
Họ:<br>
<input type="text" name="firstname">
<br>
Tên:<br>
<input type="text" name="lastname">
</form>
<p>Lưu ý: mặc định bản thân form không hiển thị ra bên ngoài, chỉ các thành phần trong form hiển thị.</p>
<p>Chiều dài khung nhập liệu kiểu text mặc định là 20 ký tự.</p>
</body>
</html>
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Họ:
Tên:
Kiểu password
<input type=”password”> tạo ra một dòng để người dùng nhập mật khẩu:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<form action="">
Tên đăng nhập:<br>
<input type="text" name="userid">
<br>
Mật khẩu:<br>
<input type="password" name="psw">
</form>
<p>Những ký tự trong ô mật khẩu sẽ được che đi (bằng dấu hoa thị hoặc chấm tròn).</p>
</body>
</html>
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Tên đăng nhập:
Mật khẩu:
Kiểu submit
<input type=”submit”> giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.
Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.
Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<form action="/demo/action_page.php">
Họ:<br>
<input type="text" name="firstname" value="Nguyen">
<br>
Tên:<br>
<input type="text" name="lastname" value="A">
<br><br>
<input type="submit" value="Gửi">
</form>
<p>Nếu bạn nhấn vào nút "Gửi", dữ liệu trong form sẽ được chuyển tới trang "action_page.php".</p>
</body>
</html>
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Họ:
Tên:
Nếu thiếu giá trị value trong thẻ input subit, nút sẽ lấy giá trị mặc định:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<form action="/demo/action_page.php">
Họ:<br>
<input type="text" name="firstname" value="Nguyen">
<br>
Tên:<br>
<input type="text" name="lastname" value="A">
<br><br>
<input type="submit">
</form>
</body>
</html>
|
Demo
Kiểu radio
<input type=”radio”> giúp bạn tạo một nút nhấn radio.
Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="male" checked>Nam
<br>
<input type="radio" name="sex" value="female">Nữ
</form>
</body>
</html>
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nam
Nữ
Kiểu checkbox
<input type=”checkbox”> giúp bạn tạo một ô tích giá trị.
Người dùng có thể chọn nhiều hơn một giá trị hoặc không chọn giá trị nào.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<form action="/demo/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike"> Tôi có một chiếc xe đạp
<br>
<input type="checkbox" name="vehicle2" value="Car"> Tôi có một chiếc ô tô
<br><br>
<input type="submit" value="Gửi">
</form>
</body>
</html>
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Tôi có một chiếc xe đạp
Tôi có một chiếc ô tô
Thẻ <button>
Thẻ <button> được sử dụng để tạo nút nhấn:
|
1
2
3
4
5
6
7
8
|
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Chào mừng bạn đến với thẻ button!')">Nhấn vào đây!</button>
</body>
</html>
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nhấn vào đây!
Các kiểu input trong HTML5
HTML5 đã thêm những kiểu input sau:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Kiểu number
Thẻ <input type=”number”> tạo ô nhập liệu chỉ có giá trị là số.
Bạn có thể thiết lập điều kiện các số được nhập vào.
Những điều kiện của bạn có được áp dụng hay không thì còn tùy thuộc vào sự hỗ trợ của trình duyệt.
<!DOCTYPE html> <html> <body> <p> Phụ thuộc vào sự hỗ trợ của trình duyệt:<br> Mà những điều kiện của bạn có được áp dụng hay không. </p> <form action="/demo/action_page.php"> Nhập vào số từ 1 đến 5: <input type="number" name="number" min="1" max="5"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="number" không được hỗ trợ trong trình duyệt từ IE9 trở về trước.</p> </body> </html>
Điều kiện trong thẻ input
Dưới đây là danh sách các điều kiện phổ biến được sử dụng trong thẻ input (có một vài điều kiện mới thuộc HTML5):
| Thuộc tính | Miêu tả |
|---|---|
| disabled | Khóa thẻ input |
max 
|
Giá trị lớn nhất có thể nhập vào trong thẻ input |
| maxlength | Số ký tự tối đa có thể nhập vào trong thẻ input |
| min
|
Giá trị nhỏ nhất có thể nhập vào trong thẻ input |
| pattern
|
Kiểm tra dự liệu nhập vào có đúng theo định dạng mẫu hay không |
| readonly | Dữ liệu chỉ có tác dụng hiển thị (không thể thay đổi) |
| required
|
Ô nhập liệu bắt buộc (không được bỏ trống) |
| size | Quy định chiều dài của khung nhập liệu (đơn vị là ký tự, không phải px) |
| step
|
Quy định mức nhảy cho ô nhập liệu (dự liệu nhập vào phải là bội số của step) |
| value | Thiết lập giá trị mặc định của ô nhập liệu |
<!DOCTYPE html> <html> <body> <p> Phụ thuộc vào sự hỗ trợ của trình duyệt:<br> Các bước nhảy số có được áp dụng hay không. </p> <form action="/demo/action_page.php"> Nhập số: <input type="number" name="points" min="0" max="100" step="10" value="30"> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> type="number" không được hỗ trợ trong trình duyệt từ IE9 trở về trước.</p> </body> </html>
Kiểu date
Thẻ <input type=”date”> tạo ô nhập liệu chỉ có giá trị là ngày tháng.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu.
Kiểu date chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
<!DOCTYPE html> <html> <body> <p> Nếu trình duyệt hỗ trợ:<br> Bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu. </p> <form action="/demo/action_page.php"> Ngày sinh: <input type="date" name="bday"> <input type="submit" value="Gửi"> </form>
