Các thẻ trong form HTML
Bài này sẽ bao gồm toàn bộ các thẻ trong form HTML. Thẻ <input> <input> là thẻ quan trọng nhất trong form. Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng. Tất cả ...
Bài này sẽ bao gồm toàn bộ các thẻ trong form HTML.
Thẻ <input>
<input> là thẻ quan trọng nhất trong form.
Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng.
Thẻ <select>
Thẻ <select> được sử dụng để tạo danh sách thả xuống:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <form action="/demo/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" value="Gửi"> </form> </body> </html> |
Demo
Thẻ <option> được sử dụng để tạo các lựa chọn trong danh sách.
Mặc định, lựa chọn đầu tiên sẽ được hiển thị khi truy cập trang.
Bạn có thể sử dụng thuộc tính selected để thay đổi lựa chọn mặc định.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <p>Bạn có thể thay đổi lựa chọn mặc định bằng thuộc tính selected.</p> <form action="/demo/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Demo
Thẻ <textarea>
Thẻ <textarea> được sử dụng để tạo khung nhập liệu gồm nhiều dòng:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <textarea name="message" rows="10" cols="30"> Bạn có thể nhập nội dung gồm nhiều dòng. </textarea> <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:
Bạn có thể nhập nội dung gồm nhiều dòng.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 thẻ trong HTML5
HTML5 đã thêm một số thẻ mới vào trong form:
- <datalist>
- <keygen>
- <output>
Thẻ <datalist> trong HTML5
Thẻ <datalist> được sử dụng để tạo các lựa chọn gợi ý cho thẻ <input>.
Người dùng sẽ nhìn thấy một danh sách thả xuống trước khi bắt đầu nhập dữ liệu.
Thuộc tính list trong thẻ <input> phải trùng với thuộc tính id trong thẻ <datalist>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <form action="/demo/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" value="Gửi"> </form> <p><b>Lưu ý:</b> Thẻ datalist chưa được hỗ trợ trên Safari và IE9 (gồm cả các phiên bản trước đó).</p> </body> </html> |
Demo
Thẻ <keygen> trong HTML5
Mục đích của thẻ <keygen> là xác thực người dùng một cách an toàn.
Thẻ <keygen> sẽ tạo ra một cặp-khóa (key-pair) trong form.
Khi dữ liệu trong form được gửi đi, 2 khóa được tạo ra, một private và một public.
Khóa private được lưu trữ ở trên máy còn khóa public được gửi đến máy chủ.
Khóa public có thể được sử dụng để tạo ra chứng chỉ để xác thực người dùng về sau.
|
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"> Tên đăng nhập: <br> <input type="text" name="user"> <br><br> Mã hóa: <br> <keygen name="security"> <br><br> <input type="submit" value="Gửi"> </form> </body> </html> |
Demo
Thẻ <output> trong HTML5
Thẻ <output> được sử dụng để hiển thị kết quả của một phép tính.
|
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" 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" value="Gửi"> </form> </body> </html> |
Demo
Các thẻ trong form
= Thẻ mới trong HTML5
| Thẻ | Miêu tả |
|---|---|
| form | Tạo một form để người dùng nhập liệu |
| input | Tạo khung dữ liệu để người dùng thao tác |
| textarea | Tạo khung nhập liệu nhiều dòng |
| label | Tạo nhãn cho thẻ input |
| fieldset | Nhóm những dữ liệu có liên quan tới nhau vào một form |
| legend | Đặt tên các nhóm dữ liệu trong thẻ fieldset |
| select | Tạo danh sách thả xuống |
| optgroup | Tạo nhóm trong danh sách thả xuống |
| option | Tạo lựa chọn trong danh sách thả xuống |
| button | Tạo một nút nhấn |
| datalist | Tạo các lựa chọn gợi ý cho thẻ input |
| keygen | Tạo cặp khóa (key-pair) trong form |
| output | Hiển thị kết quả của một phép tính |
