Phần này, cafedev chia sẻ tất cả các phần tử khác nhau trong form của HTML.
Nội dung chính
1. Các phần tử của “<form>”
Phần tử <form> có thể chứa một hoặc nhiều phần tử sau:
-
<label> -
<input> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
2. Phần tử <input>
Một trong những phần tử biểu mẫu được sử dụng nhiều nhất là phần tử <input>.
Phần tử <input> có thể được hiển thị theo nhiều cách, tùy thuộc vào loại thuộc tính.
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Nếu thuộc tính type bị bỏ qua, trường đầu vào sẽ có loại mặc định: “văn bản”.
3. Phần tử <select>
Phần tử <select> xác định danh sách thả xuống:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</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>
<input type="submit">
</form>
</body>
</html>
Các phần tử <option> định nghĩa 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 tùy chọn được chọn trước, hãy thêm thuộc tính selected vào tùy chọn:
<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
Cho phép nhiều lựa chọn:
Sử dụng thuộc tính multiple để cho phép người dùng chọn nhiều hơn một giá trị:
<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> 4. Phần tử <textarea>
Phần tử <textarea> định nghĩa trường nhập nhiều dòng (vùng văn bản):
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">Cafedev là kênh thông tin, sự kiện, hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu.</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
Thuộc tính rows chỉ định số dòng có thể nhìn thấy trong một vùng văn bản.
Thuộc tính cols chỉ định chiều rộng hiển thị của vùng văn bản.
5. Phần tử <button>
Phần tử <button> xác định nút có thể nhấp:
<!DOCTYPE html>
<html>
<body>
<h2>Cafedev demo for The button Element</h2>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
Lưu ý: Luôn chỉ định thuộc tính type cho thành phần nút. Các trình duyệt khác nhau có thể sử dụng các loại mặc định khác nhau cho thành phần nút.
6. Phần tử <fieldset> và <legend>
Phần tử <fieldset> được sử dụng để nhóm dữ liệu liên quan trong một biểu mẫu.
Phần tử <legend> định nghĩa chú thích cho phần tử <fieldset>.
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Davide"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Xuan"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>7. Phần tử <datalist>
Phần tử <datalist> định nghĩa danh sách các tùy chọn được xác định trước cho phần tử <input>.
Người dùng sẽ thấy một danh sách thả xuống của các tùy chọn được xác định trước khi họ nhập dữ liệu.
Thuộc tính list của phần tử <input>, phải tham chiếu đến thuộc tính id của phần tử <datalist>.
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<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>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>
</body>
</html>8. Phần tử <output>
Phần tử <output> biểu thị kết quả của phép tính (giống như phần tử được thực hiện bởi tập lệnh).
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>
<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>
<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>
</body>
</html>Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
