HTML - Form - Amzuni - Học lập trình trực tuyến

Một biểu mẫu HTML được sử dụng để thu thập thông tin đầu vào của người dùng. Đầu vào của người dùng thường được gửi đến máy chủ để xử lý.

<form action="/action_page.php" target="_blank">
  <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">
</form>

Phần tử <form>

Phần tử HTML được sử dụng để tạo biểu mẫu HTML cho người dùng nhập:

<form>
.
form elements
.
</form>

Phần tử <form>là nơi chứa các loại phần tử đầu vào khác nhau, chẳng hạn như: trường văn bản, hộp kiểm, nút radio, nút gửi, v.v.

Phần tử <input>

Phần tử HTML là phần tử biểu mẫu được sử dụng nhiều nhất.

Phần tử có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính type.

Dưới đây là một số ví dụ:

Type	Description
<input type=”text”>	Displays a single-line text input field
<input type=”radio”>	Displays a radio button (for selecting one of many choices)
<input type=”checkbox”>	Displays a checkbox (for selecting zero or more of many choices)
<input type=”submit”>	Displays a submit button (for submitting the form)
<input type=”button”>	Displays a clickable button

Text Fields

<input type=”text”> xác định trường nhập một dòng để nhập văn bản.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Phần tử <label>

Lưu ý việc sử dụng phần tử trong ví dụ trên.

Thẻ xác định nhãn cho nhiều thành phần của biểu mẫu.

Phần tử rất hữu ích cho người dùng trình đọc màn hình vì trình đọc màn hình sẽ đọc to nhãn khi người dùng tập trung vào phần tử đầu vào.

Phần tử 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ư nút radio hoặc hộp kiểm) – bởi vì khi người dùng nhấp vào văn bản trong phần tử , nó sẽ chuyển đổi nút radio/hộp kiểm.

Thuộc tính for của thẻ phải bằng thuộc tính id của phần tử để liên kết chúng lại với nhau.

Radio Buttons

<input type=”radio”> xác định nút radio.

Nút radio cho phép người dùng chọn MỘT trong số các lựa chọn có giới hạn.

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Phần tử Checkbox

<input type=”checkbox> định nghĩa một hộp kiểm

Các hộp kiểm cho phép người dùng chọn các tùy chọn KHÔNG hoặc NHIỀU tùy chọn trong một số lựa chọn giới hạn.

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Thẻ select

Thẻ HTML <select> được sử dụng trong một form để định nghĩa một danh sách lựa chọn.

<!DOCTYPE html>
<html>

<head>
    <title>Vi du the select trong HTML</title>
</head>

<body>
    <form action="/cgi-bin/dropdown.cgi" method="post">
        <select name="dropdown">
            <option value="co so du lieu" selected>SQL</option>
            <option value="ngon ngu lap trinh">Java</option>
        </select>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>

Thẻ textarea

Thẻ HTML <textarea> được sử dụng trong một form để khai báo một phần tử textarea – một điều khiển mà cho phép người sử dụng nhập văn bản đầu vào qua nhiều dòng.

<!DOCTYPE html>
<html>

<head>
    <title>Vi du the textarea trong HTML</title>
</head>

<body>
    <form action="/cgi-bin/hello_get.cgi" method="get">
        Nhap thong tin chi tiet: <br />
        <textarea rows="5" cols="50" name="description">
Nhap ho va ten
</textarea>
        <input type="submit" value="submit" />
    </form>
</body>

</html>

Nút submit

<input type=”submit”> xác định nút để gửi dữ liệu biểu mẫu tới trình xử lý biểu mẫu.

Trình xử lý biểu mẫu thường là một tệp trên máy chủ có tập lệnh để xử lý dữ liệu đầu vào.

Trình xử lý biểu mẫu được chỉ định trong thuộc tính hành động của biểu mẫu.

<form action="/action_page.php">
  <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">
</form>

HTML – Form