Các phần tử <form> có trong HTML
Trong HTML có thể chứa một hoặc nhiều phần tử <form> sau:
<input><label><select><textarea><button><fieldset><legend><output><option><optgroup>Thẻ <input>
Một trong những các phần tử được sử dụng nhiều nhất đó là thẻ <input>
Thẻ <input> có thể được hiển thị theo nhiều cách, tuỳ thuộc vào thuộc tính type
Ví dụ
<label for="fname">First name:</label><input type="text" id="fname" name="fname">Tất cả các giá trị khác nhau của thuộc tính được đề cập trong phần tiếp theo: Các kiểu Input trong HTML
Thẻ <label>
Thẻ <label> được dùng để xác định một số thành phần có trong <form>
Thẻ <label> này có ích cho một số người dùng có sử dụng trình đọc màn hình vì trình đọc màn hình sẽ giúp cho người dùng tập trung vào thẻ <input>
Phần tử <label> cũng giúp cho người dùng trong việc nhấp chuột vào các vùng nhỏ (như là checkbox và radio button) vì khi người dùng nhấp vào văn bản trong thẻ <label> nó sẽ làm bật/ tắt radio button/ checkbox
Thuộc tính của thẻ <label> nên dược bằng với thuộc tính của cách phần tử nên được kết nối lại với nhau
Thẻ <select>
The <select> element defines a drop-down list:
Thẻ <select> dùng để tạo một danh sách thả xuống
Ví dụ
<label for="cars">Choose a car:</label><select id="cars" name="car"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option</select>Thẻ <option> dùng để liệt kê các thành phần để được chọn
Mục đầu tiên của danh sách được mặc định là được chọn
Để xác định một thành phần được chọn thì sẽ thêm thuộc tính selected vào thẻ <option>
Ví dụ
<option value="fiat" selected>Fiat</option>Visible Values - Giá trị hiển thị:
Use the size attribute to specify the number of visible values:
Sử dụng các thuộc tính size để chỉ định số lượng giá trị hiển thị
Ví dụ
<label for="cars">Choose a car:</label><select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="volvo">Volvo</option> <option value="audi">Audi</option></select>
Allow Multiple Selections - Cho phép nhiều lựa chọn:
Use the multiple attribute to allow the user to select more than one value:
Sử dụng thuộc tính multiple để cho phép người dùng lựa chọn hơn một lựa chọn
Ví dụ
<label for="cars">Choose a car:</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>Thẻ <textarea>
The <textarea> element defines a multi-line input field (a text area):
Thẻ <textarea> dùng để nhập nhiều dòng
Ví dụ
<textarea name="message" rows="10" cols="30">The cat was playing in the garden</textarea>Thuộc tính rows dùng để hiển thị số dòng trong văn bản
Thuộc tính cols dùng để hiển thị chiều rộng của văn bản
Bạn cũng có thể xác định kích thước của vùng văn bản nhập bằng các sử dụng CSS
Ví dụ
<textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea>Thẻ <button>
Thẻ <button> dùng để định nghĩa một nút có thể nhấp
Ví dụ
<button type="button" onclick="alert('Hello World!')">Nhấp vào!</button>| Lưu ý: Luôn chỉ định thuộc tính trong phần tử button. Các loại trình duyệt khác nhau sẽ có các loại type khác nhau cho phần tử button |
Thẻ <fieldset> và <legend>
Thẻ <fieldset> được dùng để hóm các dữ liệu có liên quan trong một form
The <legend> element defines a caption for the <fieldset> element.
Trong thẻ <fieldset> có thẻ <legend> dùng để định nghĩa chú thích
Ví dụ
<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset></form>Thẻ <datalist>
Thẻ <datalist> chỉ định một danh sách bao gồm tuỳ chọn trước khi chọn một phần tử
Người dùng sẽ được nhìn thấy một danh sách gồm các tuỳ chọn trước khi họ nhập dữ liệu
Thuộc tính của thẻ <input> phỉa có id thuộc tính của <datalist>
Ví dụ
<form action="/action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist></form>Thẻ <output>
The <output> element represents the result of a calculation (like one performed by a script).
Thẻ <output> là phần tử hiển thị kết quả của một phép tính
Ví dụ
Thực hiện phép tính và hiển thị kết quả trong một phần tử <output>
<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>