Bài 26: Các phần tử trong Form HTML
Bài này mô tả tất cả các phần tử trong Form HTML. Xem lại về phần tử Form của bài trước
Nội dung
Phần tử <input>
Phần tử quan trọng nhất của form là phần tử <input>.
Phần tử <input> có các kiểu khác nhau, tùy thuộc vào thuộc tính type.
 |
Tất cả kiểu input trong HTML sẽ được giới thiệu trong bài tiếp theo. |
|---|
Phần tử <select> (Danh sách đổ xuống Drop-Down )
Phần tử <select> định nghĩa một danh sách drop-down:
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Kết quả:
Phần tử <option> định nghĩa các giá trị cho người sử dụng lựa chọn.
Mặc định giá trị đầu tiên được chọn.
Bạn có thể thêm một thuộc tính chọn (selected) vào phần tử (option) để thiết lập giá trị này là mặc định được chọn.
Ví dụ:
<option value="fiat" selected>Fiat</option>
Phần tử <textarea>
Phần tử <textarea> định nghĩa một ô nhập dữ liệu có nhiều dòng (một đoạn văn bản):
Ví dụ:
<textarea name="message" rows="5" cols="40">Timoday.edu.vn cung cấp bài học về công nghệ thông tin.</textarea>
Kết quả mã HTML này sẽ được hiển thị trong trình duyệt:
Phần tử <button> định nghĩa một nút có thể ấn được (button):
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Website Tìm ở đây xin chào bạn!')">Click Me!</button>
</body>
</html>
Kết quả mã HTML này sẽ được hiển thị trong trình duyệt:
Các phần tử của Form trong HTML5
HTML5 có thêm vào các phần tử sau:
- <datalist>
- <keygen>
- <output>
|
Theo mặc định, trình duyệt sẽ không hiển thị các phần tử mà nó không biết. Các phần tử mới sẽ không phá vỡ cấu trúc trang web của bạn. |
|---|
Phần tử <datalist> trong HTML5
Phần tử <datalist> định nghĩa trước một danh sách các giá trị tùy chọn cho phần tử <input>.
Người dùng sẽ nhìn thấy một danh sách đổ xuống các giá trị tùy chọn được định nghĩa trước ở đây giống họ nhập dữ liệu.
Thuộc tính list của phần tử <input>, phải chỉ đến thuộc tính id của phần tử <datalist>, tức là hai tên phải giống nhau để nó nhận ra nhau.
Ví dụ:
Một phần tử <input>với giá trị (value) được xác định trước trong một <datalist>:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Chú ý:</b> Thẻ datalist không hỗ trợ trình duyệt Safari và IE9 (hoặc phiên bản cũ của IE).</p>
</body>
</html>
Kết quả:
Phần tử <keygen>trong HTML5
Mục đích của phần tử <keygen> là cung cấp một cách an toàn để xác thực người dùng.
Phần tử <keygen> đi cùng với một phần tử trên form để phát sinh ra cặp khoá.
Khi form được submit, hai khóa được tạo ra, một bí mật (one private) và một công khai (one public).
Khóa bí mật (private key) được lưu trữ cục bộ , và khóa chung (public key) là gửi tới máy chủ.
Khóa công khai (public key) có thể được sử dụng để tạo ra một chứng chỉ của client để xác thực người dùng trong tương lai.
Ví dụ:
Một form cùng với trường keygen:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
<input type="submit">
</form>
</body>
</html>
Phần tử <output> trong HTML5
Phần tử <output> thể hiện cho kết quả của phép tính (như được thực hiện bởi script).
Ví dụ:
Thực hiện một phép tính và hiển thị kết quả thông qua phần tử <output>:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" name="a" value="50">100 + <input type="number" id="b" name="b" value="50"> =
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
</body>
</html>
Kết quả:
Bài tập!
Bài tập 1: Tạo một danh sách đổ xuống với name=”cars” nằm trong một form. Trong đó có các giá trị tùy chọn (options) như: “volvo”, “ford”, “fiat”, and “audi”.
Bài tập 2: Tạo một Form có một button và một TextArea với name=”note”.
Bài tập 3: Thêm một nút vào form và hiển thị trên nút là “Click Me!”.
Phần tử Form trong HTML
= mới trong HTML5.
| Thẻ | Mô tả |
|---|---|
| <form> | Định nghĩa một form được sử dụng trong HTML |
| <input> | Định nghĩa điều khiển đầu vào |
| <textarea> | Định nghĩa đầu vào văn bản trên nhiều dòng (textarea) |
| <label> | Định nghĩa một nhãn cho phần tử <input> |
| <fieldset> | Nhóm phần tử liên quan trong form |
| <legend> | Định nghĩa một đầu đề của thành phần<fieldset> |
| <select> | Định nghĩa một danh sách đổ xuống (drop-down list) |
| <optgroup> | Định nghĩa một nhóm của tùy chọn liên quan trong danh sách đổ xuống (drop-down list) |
| <option> | Định nghĩa một giá trị tùy chọn (option) trong danh sách đổ xuống (drop-down list) |
| <button> | Định nghĩa một nút sử dụng cho viện ấn |
| <datalist> | Định nghĩa trước một danh sách các giá trị tùy chọn cho các phần tử input |
| <keygen> | Định nghĩa một cặp phát sinh ra khoá với một phần tử form (cho form) |
| <output> | Định nghĩa kết quả tính toán |
2 phản hồi
[…] selected […]
[…] <datalist> […]