Bài đăng nổi bật

Thẻ input

Thẻ input được sử dụng để tạo các trường giúp người dùng nhập thông tin vào.
Có nhiều loại input khác nhau, trong đó phổ biến là:
  • text
  • password
  • checkbox
  • radio
  • reset
  • submit
  • hidden
Input Text
Dùng để nhập dữ liệu chuỗi ngắn (trên 1 dòng).
<form action="/action_page.php">
  Account:
  <input name="account" type="text"/>
</form>

Input Password
Dùng để nhập vào mật khẩu.
<form action="/action_page.php">
  Password:
  <input name="password" type="password"/>
</form>

Input Checkbox
Dùng để lựa chọn nhiều hạng mục từ một danh sách.
<form action="/action_page.php">
  Sở thích:<br/>
  <label><input name="hobby" value="travel" type="checkbox"/> Du lịch</label> <br/>
  <label><input name="hobby" value="sport" type="checkbox"/> Thể thao</label> <br/>
  <label><input name="hobby" value="cooking" type="checkbox"/> Nấu ăn</label> <br/>
</form>

Input Radio
Dùng để lựa chọn một hạng mục từ một danh sách
<form action="/action_page.php">
  Sở thích:<br/>
  <label><input name="hobby" value="travel" type="radio" checked/> Du lịch</label> <br/>
  <label><input name="hobby" value="sport" type="radio"/> Thể thao</label> <br/>
  <label><input name="hobby" value="cooking" type="radio"/> Nấu ăn</label> <br/>
</form>

Lưu ý: thuộc tính checked cho phép quy định giá trị mặc định được chọn.

Input Reset
Dùng để xoá các giá trị trong một form, đưa các trường về giá trị mặc định của chúng.

<form action="/action_page.php">
  Account: <input name="account" value="admin" type="text"/><br/>
  Sở thích:<br/>
  <label><input name="hobby" value="travel" type="radio" checked/> Du lịch</label> <br/>
  <label><input name="hobby" value="sport" type="radio"/> Thể thao</label> <br/>
  <label><input name="hobby" value="cooking" type="radio"/> Nấu ăn</label> <br/>
  <input type="reset" value="Reset"/>
</form>

Input Submit
Dùng để hiển thị một nút, có chức năng đẩy dữ liệu từ form lên server khi bấm vào. <form method="POST">
  Account: <input name="account" value="admin" type="text"/><br/>
  Sở thích:<br/>
  <label><input name="hobby" value="travel" type="radio" checked/> Du lịch</label> <br/>
  <label><input name="hobby" value="sport" type="radio"/> Thể thao</label> <br/>
  <label><input name="hobby" value="cooking" type="radio"/> Nấu ăn</label> <br/>
  <input type="submit" value="Send data"/>
</form>

Input Hidden
Dùng để chứa giá trị của form nhưng không hiển thị trên giao diện người dùng. Dữ liệu này cũng được đẩy lên server như bình thường. 
<form method="POST">
  <input name="secret" value="abcg124faasfjh149dfd" type="hidden"/>
  Account: <input name="account" value="admin" type="text"/><br/>
  Sở thích:<br/>
  <label><input name="hobby" value="travel" type="radio" checked/> Du lịch</label> <br/>
  <label><input name="hobby" value="sport" type="radio"/> Thể thao</label> <br/>
  <label><input name="hobby" value="cooking" type="radio"/> Nấu ăn</label> <br/>
  <input type="submit" value="Send data"/>
</form>

Thẻ button

Thẻ button được sử dụng để hiển thị một nút.

Bên trong thẻ button thì chúng ta có thể đưa các nội dung khác vào, chẳng hạn như là chuỗi hoặc hình ảnh. Đây cũng chính là sự khác biệt so với việc sử dụng thẻ input button, bởi vì bên trong input button thì chỉ có thể chứa text.

<form method="POST">
  <button type="button">
      <img src="http://codegym.vn/wp-content/uploads/2017/03/CodeGym-3-02-copy.jpg" width="200px"/>
  </button>
</form>

Thẻ textarea

Thẻ textarea được sử dụng để hiển thị trường nhập chuỗi dài (nhiều dòng).
<form method="POST">
  <textarea cols="50" rows="4">This is a very very long text text text text text text text text text text text text </textarea>

</form>

Post a Comment

أحدث أقدم