Các loại Form trong HTML - HTML Form Elements

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    26 thg 10, 2023

  • Số lượt xem

    196 lượt xem


Bài học này mô tả tất cả các phần từ của thẻ <form> trong HTML( HTML form elements). Bao gồm các hướng dẫn chi tiết các cách sử dụng thẻ <form> trong một wesbite

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>

 


Tổng số đánh giá: 2

Xếp hạng: 5.0 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.