Các thuộc tính Input của thẻ form trong HTML - HTML Input form* Attributes

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    26 thg 10, 2023

  • Số lượt xem

    215 lượt xem


Bài học mô tả và hướng dẫn các cách sử dụng thẻ input trong thẻ <form>. Giải thích chi tiết các thuộc tính input được dùng trong thẻ <form> trong HTML

Bài học này mô tả các thuộc tính khác nhau của các trường <input> HTML

Thuộc tính form

Thuộc tính form của thẻ <input> xác định form mà phần tử <input> thuộc về.

Ví dụ:

Một thẻ <input> nằm bên ngoài form HTML (nhưng vẫn là một phần của form):

<form action="/action_page.php" id="form1">
        <label for="fname">Tên:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <input type="submit" value="Gửi">
</form>

 

<label for="lname">Họ:</label>
<input type="text" id="lname" name="lname" form="form1">

Thuộc tính formaction

Thuộc tính formaction của thẻ <input> xác định URL của tệp sẽ xử lý dữ liệu nhập khi form được gửi.

Ví dụ:

Một form HTML với hai nút gửi, với các hành động khác nhau:

<form action="/action_page.php">
        <label for="fname">Tên:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Họ:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Gửi">
        <input type="submit" formaction="/action_page2.php" value="Gửi như Admin">
</form>

Thuộc tính formenctype

Thuộc tính formenctype của thẻ <input> xác định cách mã hóa dữ liệu form khi gửi (chỉ áp dụng cho form có method="post").

Ví dụ:

Một form với hai nút gửi. Nút đầu tiên gửi dữ liệu form với mã hóa mặc định, nút thứ hai gửi dữ liệu form được mã hóa dưới dạng "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
        <label for="fname">Tên:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <input type="submit" value="Gửi">
        <input type="submit" formenctype="multipart/form-data" value="Gửi dưới dạng Multipart/form-data">
</form>

Thuộc tính formmethod

Thuộc tính formmethod của thẻ <input> xác định phương thức HTTP để gửi dữ liệu form đến URL action.

Ví dụ:

Một form với hai nút gửi. Nút đầu tiên gửi dữ liệu form với method="get". Nút thứ hai gửi dữ liệu form với method="post":

<form action="/action_page.php" method="get">
        <label for="fname">Tên:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Họ:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Gửi bằng GET">
        <input type="submit" formmethod="post" value="Gửi bằng POST">
</form>

Thuộc tính formtarget

Thuộc tính formtarget của thẻ <input> xác định tên hoặc một từ khóa chỉ ra nơi hiển thị phản hồi sau khi gửi form.

Ví dụ:

Một form với hai nút gửi, với cửa sổ đích khác nhau:

<form action="/action_page.php">
        <label for="fname">Tên:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Họ:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Gửi">
        <input type="submit" formtarget="_blank" value="Gửi vào cửa sổ/tab mới">
</form>

Thuộc tính formnovalidate

Thuộc tính formnovalidate của thẻ <input> xác định rằng một phần tử <input> không nên được kiểm tra khi được gửi.

Ví dụ:

Một form với hai nút gửi (có và không có kiểm tra):

<form action="/action_page.php">
        <label for="email">Nhập email của bạn:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Gửi">
        <input type="submit" formnovalidate="formnovalidate" value="Gửi mà không kiểm tra">
</form>

Thuộc tính novalidate

Thuộc tính novalidate là một thuộc tính của <form>.

Khi sử dụng novalidate xác định rằng tất cả dữ liệu form không nên được kiểm tra khi gửi.

Ví dụ:

Xác định rằng không có dữ liệu form nào nên được kiểm tra khi gửi:

<form action="/action_page.php" novalidate>
        <label for="email">Nhập email của bạn:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Gửi">
</form>

Các phần tử form HTML và Trường <input>

Thẻ Mô tả

<form> Định nghĩa một form HTML cho đầu vào của người dùng
<input> Định nghĩa điều khiển đầu vào

 

 


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

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.