Thẻ <form>

FORM trong HTML được dùng để người dùng gửi thông tin (submit) lên server. Để tạo FORM dùng thẻ <form>

<body>
   <form action="http://xuanthulab.net/" method="post">
      <!--Các phần tử trong FORM -->
   </form>
</body>

action là thuộc tính chỉ ra địa chỉ URL mà dữ liệu của form gửi đến. Thuộc tính method có giá trị bằng get hoặc post.

Sử dụng method="get" thì khi submit dữ liệu được biểu diễn thông qua URL. Sử dụng method="post" thì khi submit biểu diễn trong nội dung của Request gửi đến Server và là ẩn với người dùng, sử dụng post an toàn hơn.

Để submit (gửi) form, thường tạo ra một nút bấm từ phần tử <input> và chỉ ra type="submit" Ví dụ: <input type="submit" name="submit" value="Đăng Nhập" />.

Ví dụ form sau yêu cầu người dùng điền tên đăng nhập, password và bấm vào nút Đăng nhập để gửi đi.

<form action="http://xuanthulab.net" method="get">
    <label>Tên đăng nhập:</label><br>
    <input name="name" type="text" value=""><br>

    <label>Mật khẩu:</label><br>
    <input name="pass" type="password" value=""><br>

    <input type="submit" name="submit" value="Đăng Nhập" />
</form>
form

Giả sử bạn nhập vào tên là test, mật khẩu là abc thì với form sử dụng phương thức get, nên bấm vào đăng nhập thì thông tin sẽ mô tả bởi URL và nhìn vào thanh địa chỉ trình duyệt sẽ có dạng

https://xuanthulab.net/?name=test&pass=abc&submit=Đăng+Nhập

Bạn thấy các dữ liệu trong thẻ input đã được biểu diễn bằng URL với tên dữ liệu tương ứng với tên của input là: name, pass, submit

Trong trường hợp bạn chọn method là post thì sẽ không nhìn thấy dữ liệu biểu diễn qua URL như thế này mà dữ liệu được tích hợp vào dữ liệu Request.

Các phần tử trong FORM

Các phần tử trong FORM là nơi mà người dụng nhập dữ liệu, lựa chọn dữ liệu, các phần tử dữ liệu hay dùng trong form có thể kể đến là: <input> <textarea> <select> <button> <datalist> <label> <fieldset> <datalist>

Thường thì mỗi phần tử của FORM để người dùng nhập dữ liệu thì phần tử đó cần có thuộc tính name là tên loại dữ liệu cần nhập.

Thẻ <input>

Thẻ inputform, thẻ này có thể hiện thị giao diện nhập liệu nhiều cách tùy vào thuộc tính type

Trong form người ta cũng thường dùng thẻ label để cho biết tiêu đề của một thẻ input

Sau đây là một số type hay dùng:


<input type="text"> Tạo ra một hộp để nhập dữ liệu. Ví dụ:

<form>
    Họ:<br>
    <input type="text" name="firstname"><br>
    Tên:<br>
    <input type="text" name="lastname">
</form>
Họ:

Tên:

<input type="password"> Tạo ra một hộp để nhập mật khẩu. Ví dụ:

<form>
  Tên:<br>
  <input type="text" name="username"><br>
  Mật khẩu:<br>
  <input type="password" name="psw">
</form> 
Tên:

Mật khẩu:

<input type="submit"> Tạo ra một nút bấm và khi bấm vào dữ liệu trong FORM chứa nó sẽ được gửi đi. Ví dụ:

<form action="url">
    Nhập số:<br>

    <input type="text" name="number" value="2017">
    <input type="submit" value="Submit">
</form>
Nhập số:

<input type="reset"> Tạo ra một nút bấm và khi bấm vào dữ liệu trong FORM phục hồi về mặc định.


<input type="radio"> Tạo ra các lựa chọn để người dùng chọn một trong các tùy chọn đó.

<form>
    <input type="radio" name="gioitinh" value="Nam" checked> Nam<br>
    <input type="radio" name="gioitinh" value="Nữ"> Nữ<br>
    <input type="radio" name="gioitinh" value="Khác"> Khác
</form>
Nam
Nữ
Khác

<input type="radio"> Tạo ra các lựa chọn để người dùng chọn một hoặc nhiều trong các tùy chọn đó.

<form>
  <input type="checkbox" name="love1" value="LovePHP"> Tôi thích PHP<br>
  <input type="checkbox" name="love1" value="LoveHTML"> Tôi thích HTML 
</form>
Tôi thích PHP
Tôi thích HTML

Thẻ <textarea>

Thẻ textare tạo ra một hộp nhập dữ liệu dạng text có nhiều dòng. Có thuộc tính col độ rộng và row số dòng.

<textarea name="info" rows="5" cols="30">
Tôi đang học HTML
</textarea>
Đăng ký theo dõi ủng hộ kênh