Bài này chúng ta sẽ tìm hiểu về một số phần tử <input> trong form của HTML
Nội dung chính
1. Các input type
Dưới đây là các loại đầu vào khác nhau mà bạn có thể sử dụng trong HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
2. Kiểu nhập văn bản
<input type="text"> định nghĩa trường nhập văn bản một dòng:
<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> 3. Kiểu nhập Password
<input type="password"> định nghĩa trường mật khẩu:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form> 4. Kiểu nhập submit
<input type="submit"> xác định một nút để gửi dữ liệu biểu mẫu đến trình xử lý biểu mẫu.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="David"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Xuan"><br><br>
<input type="submit" value="Submit">
</form> 5. Kiểu nhập Reset
<input type="reset"> định nghĩa nút đặt lại sẽ đặt lại tất cả các giá trị biểu mẫu thành giá trị mặc định của chúng:
<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">
<input type="reset">
</form> 6. Kiểu nhập Radio
<input type="radio"> định nghĩa một nút radio.
Các nút radio cho phép người dùng CHỈ chọn MỘT trong số các lựa chọn:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form> 7. Kiểu nhập Checkbox
<input type="checkbox"> định nghia một checkbox
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 THÊM với số lượng lựa chọn hạn chế.
<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> 8. Kiểu nhập Button
<input type="button"> định nghĩa một nút:
<input type="button" onclick="alert('Hello World!')" value="Click Me!"> 9. Kiểu nhập Color
<input type="color"> được sử dụng cho các trường đầu vào có chứa màu
Tùy thuộc vào hỗ trợ trình duyệt, bộ chọn màu có thể hiển thị trong trường nhập.
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form> 10. Kiểu nhập Date
<input type="date"> được sử dụng cho các trường đầu vào nên chứa một ngày.
Tùy thuộc vào hỗ trợ trình duyệt, trình chọn ngày có thể hiển thị trong trường nhập.
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form> Bạn cũng có thể sử dụng các thuộc tính min và max để thêm các hạn chế cho ngày:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form> 11. Kiểu nhập Datetime-local
<input type="datetime-local"> chỉ định trường nhập ngày và giờ, không có múi giờ.
Tùy thuộc vào hỗ trợ trình duyệt, trình chọn ngày có thể hiển thị trong trường nhập.
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form> 12. Kiểu nhập Email
<input type="email"> được sử dụng cho các trường đầu vào có chứa địa chỉ email.
Tùy thuộc vào hỗ trợ trình duyệt, địa chỉ email có thể được xác nhận tự động khi gửi.
Một số điện thoại thông minh nhận ra loại email và thêm “.com” vào bàn phím để khớp với đầu vào email.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form> 13. Kiểu nhập file
<input type="file"> định nghĩa trường chọn tệp và nút “Browse” để tải tệp lên.
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form> 14. Kiểu nhập số
<input type="number"> định nghĩa trường nhập số.
Bạn cũng có thể đặt các hạn chế về những con số được chấp nhận.
Ví dụ sau hiển thị trường nhập số, trong đó bạn có thể nhập giá trị từ 1 đến 5:
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form> 15. Hạn chế của input
Dưới đây là danh sách một số hạn chế đầu vào phổ biến:
| Attribute. | Description |
|---|---|
| checked | Chỉ định rằng trường đầu vào phải được chọn trước khi tải trang (đối với loại = “checkbox” hoặc loại = “radio”) |
| disabled | Chỉ định rằng một trường đầu vào sẽ bị vô hiệu hóa |
| max | Chỉ định giá trị tối đa cho trường đầu vào |
| maxlength | Chỉ định số lượng ký tự tối đa cho trường đầu vào |
| min | Chỉ định giá trị tối thiểu cho trường đầu vào |
| pattern | Chỉ định biểu thức chính quy để kiểm tra giá trị đầu vào |
| readonly | Chỉ định rằng một trường đầu vào chỉ được đọc (không thể thay đổi) |
| required | Chỉ định rằng một trường đầu vào là bắt buộc (phải được điền vào) |
| size | Chỉ định chiều rộng (tính bằng ký tự) của trường đầu vào |
| step | Chỉ định các khoảng số hợp pháp cho trường đầu vào |
| value | Chỉ định giá trị mặc định cho trường đầu vào |
Bạn sẽ tìm hiểu thêm về các hạn chế đầu vào trong chương tiếp theo.
Ví dụ sau hiển thị trường nhập số, trong đó bạn có thể nhập giá trị từ 0 đến 100, trong các bước của 10. Giá trị mặc định là 30:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form> 16. Kiểu nhập Range
<input type="range"> định nghĩa một điều khiển để nhập một số có giá trị chính xác không quan trọng (như điều khiển thanh trượt). Phạm vi mặc định là 0 đến 100. Tuy nhiên, bạn có thể đặt các hạn chế về số nào được chấp nhận với các thuộc tính min, max và step:
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form> 17. Kiểu nhập Tel
<input type="tel"> được sử dụng cho các trường đầu vào nên chứa số điện thoại.
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> 18. Kiểu time
<input type="time"> cho phép người dùng chọn thời gian (không có múi giờ)
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form> 19. Kiểu nhập Url
<input type="url"> được sử dụng cho các trường đầu vào nên chứa địa chỉ URL.
Tùy thuộc vào hỗ trợ trình duyệt, trường url có thể được xác nhận tự động khi gửi.
Một số điện thoại thông minh nhận ra loại url và thêm “.com” vào bàn phím để khớp với đầu vào url.
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form> 20. Kiểu nhập Week
<input type="week"> cho phép người dùng chọn một tuần và năm.
Tùy thuộc vào hỗ trợ trình duyệt, trình chọn ngày có thể hiển thị trong trường nhập.
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form> Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
