Các input đều giống nhau về cấu trúc, chỉ khác nhau về type. Chính type này quyết định kiểu của input. Có đến hơn 20 type khác nhau. Một số type input chỉ được hỗ trợ trong HTML5. Các type giới thiệu trong ngày hôm nay được tất cả các trình duyệt thông dụng hỗ trợ.
Nhập text
Ví dụ:
Code mẫu:
Họ tên: <input name="hoten" type="text" />
Giá trị của thuộc tính name sẽ được dùng để lấy giá trị input, cả PHP và JavaScript đều căn cứ vào name để biết giá trị nằm trong input.
Nhập password
Ví dụ:
Mật khẩu: Code mẫu:
<input name="psw" type="password" />
Vì là nhập password nên khi bạn gõ vào trường này nó sẽ hiện ra các dấu hoa thị *, để người khác không nhìn thấy mật khẩu.
File đính kèm
Ví dụ:
Chọn ảnh của bạn: Code mẫu:
<input type="file" name="anh">
Button reset
Tác dụng của nút nhấn reset là xóa các dữ liệu mà bạn nhập không đúng, giả dụ nhập tên và quê quán vào 2 trường dưới đây, rối nhấn reset xem điều gì xảy ra:
<form action="#">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="que"><br />
<input type="reset" value="Reset">
</form>
Button submit
Tác dụng của nút nhấn submit là gửi dữ liệu, khi bạn nhập đầy đủ các trường, và nhấn submit thì dữ liệu từ các trường bạn nhập sẽ được gửi đến đâu đó để xử lý tiếp. Có thể nó sẽ được Validate bằng JavaScript để chuẩn hóa, sau đó gửi lên Server để ghi thông tin vào cơ sở dữ liệu bằng PHP (hoặc ngôn ngữ lập trình web khác).
Ví dụ:
Code mẫu:
<form action="#">
Tên đăng nhập: <input name="user" type="text" /><br />
Mật khẩu: <input name="pass" type="text" /><br />
<input type="submit" value="Submit" />
</form>
Ẩn input
Code mẫu:<form action="#">
Họ tên: <input type="text" name="hoten"><br>
<input type="hidden" name="quocgia" value="Việt Nam">
<input type="submit" value="Submit">
</form>
Bạn có thể thấy input có name là quocgia bị ẩn không hiện trong form. Tuy bị ẩn nhưng nếu chúng ta Submit nó giá trị "Việt Nam" vẫn được gửi đi.
Radio button
Dùng để chọn chỉ 1 trong nhiều lựa chọn, ví dụ:
Code mẫu:
<form action="#">
<input name="gioitinh" type="radio" value="Nam" />Nam<br />
<input name="gioitinh" type="radio" value="Nữ" />Nữ<br />
<input name="gioitinh" type="radio" value="Khác" />Khác
</form>
Checkbox
Dùng để chọn nhiều lựa chọn cùng lúc, có thể 1 hoặc nhiều, ví dụ:
Code mẫu:
<form action="#">
<input name="thethao" type="checkbox" value="Bóng đá" />Bóng đá<br />
<input name="thethao" type="checkbox" value="Bơi lội" />Bơi lội<br />
<input name="thethao" type="checkbox" value="Điền kinh" />Điền kinh<br />
<input name="thethao" type="checkbox" value="Cầu lông" />Cầu lông<br />
<input name="thethao" type="checkbox" value="Võ thuật" />Võ thuật
</form>
Thông tin đầy đủ hơn về Checkbox và Radio button bạn có thể đọc để tham khảo thêm.
Type cuối cùng tôi đề cập là email, sở dĩ như vậy vì type này chỉ được hỗ trợ trong HTML5 - tuy nhiên nói là vậy thôi, chứ chúng ta cũng không phải lo gì cả, vì input email đã được support tốt bới các trình duyệt. Code mẫu:
Email: <input name="email" type="email" />
<input type="submit">
</form>
Kết quả:
No comments:
Post a Comment