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>
إرسال تعليق