HTML <form> Elements
HTML <form> element có thể chứa một hoặc nhiều form element:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
<input> Element
Một trong những element form được sử dụng nhiều nhất là element <input>.
Element <input> có thể được hiển thị theo nhiều cách, tùy thuộc vào attribute type.
Ví dụ
<label for="fname">Tên:</label> <input type="text" id="fname" name="fname">
<label> Element
Lưu ý việc sử dụng phần tử <label> trong ví dụ trên.
Thẻ <label> xác định nhãn cho nhiều form element.
<label> element hữu ích cho người dùng screen readers, vì screen readers sẽ đọc to nhãn khi người dùng tập trung vào element đầu vào.
<label> element cũng giúp người dùng gặp khó khăn khi nhấp vào các vùng rất nhỏ (chẳng hạn như radio button hoặc checkbox) - bởi vì khi người dùng nhấp vào văn bản trong <label> element, nó sẽ chuyển vào radio button / checkbox.
Attribute for của thẻ <label> phải bằng attribute id của <input> element để liên kết chúng với nhau.
<select> Element
Element <select> xác định danh sách thả xuống:
Ví dụ
<label for="cars">Chọn xe:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
Các element <option> xác định một tùy chọn có thể được chọn.
Theo mặc định, mục đầu tiên trong danh sách thả xuống được chọn.
Để xác định một tùy chọn đã chọn trước, hãy thêm attribute selected vào tùy chọn.
Ví dụ
<option value="fiat" selected>Fiat</option>
Giá trị có thể nhìn thấy:
Sử dụng attribute size để chỉ định số lượng giá trị hiển thị:
<label for="cars">Chọn xe:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>Cho phép nhiều lựa chọn:
Sử dụng attribute multiple để cho phép người dùng chọn nhiều giá trị:
Ví dụ
<label for="cars">Chọn xe:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select><textarea> Element
Element <textare> xác định một trường đầu vào nhiều dòng (một vùng văn bản):
<textarea name="message" rows="10" cols="30"> Con mèo đang chơi ở sau. </textarea>Attribute row chỉ định số dòng có thể nhìn thấy trong một text area.
Attribute cols chỉ định chiều rộng có thể nhìn thấy của một text area.
Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Bạn cũng có thể xác định kích thước của text area bằng cách sử dụng CSS:
<textarea name="message" style="width:200px; height:600px;"> Con mèo đang chơi ở sau vườn </textarea>
<button> Element
Element <button> xác định một nút có thể nhấp:
Ví dụ
<button type="button" onclick="alert('Hello World!')">Click Me!</button>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
<fieldset> và <legend> Elements
Element <fieldset> được sử dụng để nhóm dữ liệu liên quan trong một form.
Element <legend> xác định phụ đề cho phần tử <fieldset>.
Ví dụ
<form action="/action_page.php"> <fieldset> <legend>Nhân viên:</legend> <label for="fname">Họ:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Tên:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
<output> Element
Element <output> đại diện cho kết quả của một phép tính (giống như một phép tính được thực hiện bởi tập lệnh).
Ví dụ
<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>