Thẻ <input> trong HTML là một thẻ dùng để tạo các ô nhập liệu trong một form. Nó có thể được sử dụng để tạo các kiểu nhập liệu khác nhau như text, password, radio, checkbox, v.v.
Giới thiệu về thẻ input
Thẻ “input” là một thẻ HTML được sử dụng để tạo ra các phần tử đầu vào (input) trên trang web. Nó cho phép người dùng nhập và gửi dữ liệu từ một biểu mẫu hoặc tương tác với các chức năng trên trang web.
Cú pháp cơ bản của thẻ “input” như sau:
<input type="..." name="..." value="...">
Có nhiều thuộc tính mà bạn có thể sử dụng trong thẻ “input” để điều chỉnh hành vi và giao diện của nó. Dưới đây là một số thuộc tính phổ biến:
- “type”: Xác định loại đầu vào. Ví dụ: “text” cho ô nhập văn bản, “checkbox” cho hộp kiểm, “radio” cho nút radio, và nhiều loại khác nhau như “password”, “email”, “number”, v.v.
- “name”: Xác định tên của đầu vào, được sử dụng khi gửi dữ liệu lên máy chủ hoặc xử lý dữ liệu bằng JavaScript.
- “value”: Xác định giá trị mặc định của đầu vào.
- “placeholder”: Hiển thị một văn bản gợi ý trong đầu vào khi không có giá trị.
- “required”: Yêu cầu người dùng nhập giá trị vào đầu vào.
- “disabled”: Vô hiệu hóa đầu vào, ngăn người dùng nhập liệu vào nó.
Các Loại Input trong HTML
Trong bài học này, chúng ta sẽ tìm hiểu về các loại đầu vào của phần tử <input>.
Loại Input: Text
<form action="action_page.php"> Họ và tên:<br> <input type="text" name="fullName"> <br> <br> <input type="submit"> </form>
Ghi chú:
- Thẻ
<input type="text">sử dụng để nhập dữ liệu văn bản (một dòng). - Độ rộng mặc định của trường văn bản là 20 ký tự.
Loại Input: Password
<form action=""> Tên người dùng:<br> <input type="text" name="username"> <br> Mật khẩu người dùng:<br> <input type="password" name="password"> </form>
Ghi chú:
- Các ký tự trong trường mật khẩu được ẩn đi (hiển thị dưới dạng sao hoặc chấm tròn).
Loại Input: Submit
<form action="action_page.php"> Họ đệm:<br> <input type="text" name="lastName" value="Mickey"> <br> Tên:<br> <input type="text" name="firstName" value="Mouse"> <br> <br> <input type="submit" value="Gửi"> </form>
Ghi chú:
- Thẻ
<input type="submit">định nghĩa một nút để gửi dữ liệu từ form tới một trang xử lý.
Loại Input: Radio
<form action="action_page.php"> <input type="radio" name="gender" value="male" checked> Nam<br> <input type="radio" name="gender" value="female"> Nữ<br> <input type="radio" name="gender" value="other"> Khác<br> <br> <input type="submit"> </form>
Ghi chú:
- Thẻ
<input type="radio">định nghĩa một nút radio. - Nút radio cho phép người sử dụng chọn duy nhất một lựa chọn từ danh sách các lựa chọn.
Kiểu Input: Checkbox
<form action="action_page.php"> <input type="checkbox" name="vehicle1" value="Xe đạp"> Tôi có một chiếc xe đạp <br> <input type="checkbox" name="vehicle2" value="Ô tô"> Tôi có một chiếc ô tô <br><br> <input type="submit"> </form>
Ghi chú:
- Thẻ
<input type="checkbox">định nghĩa một nút checkbox. - Checkboxes cho phép người sử dụng chọn không hoặc nhiều lựa chọn từ danh sách đưa ra.
Kiểu Input: Button
<input type="button" onclick="alert('Website Tìm ở đây chào bạn!')" value="Kích Tôi!">Ghi chú:
- Thẻ
<input type="button">định nghĩa một nút button. - Khi nút được kích hoạt, một cửa sổ thông báo sẽ xuất hiện.
Kiểu Input: Number
<p> Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br> Các giới hạn số sẽ áp dụng cho các trường dữ liệu đầu vào. </p> <form action="action_page.php"> Chọn giá trị (trong khoảng từ 1 tới 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>Chú ý:</b> type="number" không được hỗ trợ trong IE9 và trước đó.</p>
Ghi chú:
- Thẻ
<input type="number">được sử dụng cho trường dữ liệu số. - Có thể thiết lập giới hạn số lượng cho trường dữ liệu.
Hy vọng rằng bài viết đã giúp bạn hiểu rõ hơn về cách sử dụng các kiểu đầu vào trong HTML và cách chúng được hiển thị trên trình duyệt.
Kiểu Input: Date
Thẻ <input type="date"> được sử dụng khi trường dữ liệu đầu vào chứa các giá trị là ngày. Tùy thuộc vào sự hỗ trợ của các trình duyệt, một bộ chọn ngày có thể hiển thị trong các trường dữ liệu đầu vào.
Ví dụ 10:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
Một bộ chọn ngày sẽ được hiện lên khi bạn nhập các trường dữ liệu đầu vào.
</p>
<form action="action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
<p><strong>Note:</strong> type="date" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>Bạn có thể bổ sung thêm các giới hạn đầu vào:
Ví dụ 11:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> type="date" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>Kiểu Input: Color
Thẻ <input type=”color”> được sử dụng khi trường dữ liệu đầu vào chứa các giá trị là màu sắc. Tùy thuộc vào sự hỗ trợ của các trình duyệt, một bộ chọn màu sắc có thể hiển thị trong các trường dữ liệu đầu vào.
Ví dụ 12:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
Một bộ chọn màu sắc sẽ được hiện lên khi bạn nhập các trường dữ liệu đầu vào.
</p>
<form action="action_page.php">
Bạn chọn những màu sắc mà mình yêu thích:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
<p><b>Note:</b> type="color" không được hỗ trợ bởi Internet Explorer / Edge.</p>
</body>
</html>Bạn chọn những màu sắc mà mình yêu thích:
Kiểu Input: Range
Thẻ <input type=”range”> được sử dụng khi trường dữ liệu đầu vào chứa dữ liệu là giá trị trong phạm vi nhất định. Tùy thuộc vào sự hỗ trợ của các trình duyệt, các trường dữ liệu đầu vào có thể hiển thị như là thanh điều khiển.
Ví dụ 13:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
Thẻ đầu vào "range" có thể hiển thị như một thanh điều khiển.
</p>
<form action="action_page.php" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
<p><b>Note:</b> type="range" không được hỗ trợ bởi trình duyệt Internet Explorer 9 và các phiên bản trước đó.</p>
</body>
</html>Bạn có thể sử dụng các thuộc tính sau để xác định các giới hạn: min, max, step, value.
Kiểu Input: Month
Thẻ <input type=”month”> cho phép người sử dụng có thể lựa chọn một tháng và năm. Phụ thuộc vào sự hỗ trợ của các trình duyệt, một bộ chọn ngày có thể hiển thị trong các trường dữ liệu đầu vào.
Ví dụ 14:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
Một bộ chọn ngày sẽ được hiển thị khi bạn nhập trường dữ liệu đầu vào.
</p>
<form action="action_page.php">
Birthday (month and year):
<input type="month" name="bdaymonth">
<input type="submit">
</form>
<p><strong>Note:</strong> type="month" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>Kiểu Input: Week
Thẻ <input type=”week”> cho phép người sử dụng lựa chọn tuần và năm. Phụ thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường dữ liệu đầu vào.
Ví dụ 15:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của trình duyệt:<br>
Một bộ chọn ngày sẽ được hiển thị khi bạn nhập trường dữ liệu đầu vào.
</p>
<form action="action_page.php">
Select a week:
<input type="week" name="year_week">
<input type="submit">
</form>
<p><strong>Note:</strong> type="week" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>Kiểu Input: Time
Thẻ <input type=”time”> cho phép người dùng lựa chọn một thời gian (không có múi giờ). Phụ thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường dữ liệu đầu vào.
Ví dụ 16:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của trình duyệt:<br>
Một bộ chọn ngày sẽ được hiển thị khi bạn nhập trường dữ liệu đầu vào.
</p>
<form action="action_page.php">
Select a time:
<input type="time" name="usr_time">
<input type="submit">
</form>
<p><strong>Note:</strong> type="time" không hỗ trợ bởi Firefox, hoặc Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>Kiểu Input: DateTime
Thẻ <input type=”datetime”> cho phép người sử dụng lựa chọn ngày và thời gian (không có múi giờ).
Ví dụ 17:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của trình duyệt:<br>
Một bộ chọn ngày sẽ được hiển thị khi bạn nhập trường dữ liệu đầu vào.
</p>
<form action="action_page.php">
Birthday (date and time):
<input type="datetime" name="bdaytime">
<input type="submit">
</form>
<p><b>Note:</b> type="datetime" không được hỗ trợ bởi Chrome, Firefox, hoặc Internet Explorer.</p>
</body>
</html>Mách nhỏ: Thẻ đầu vào datetime đã bị loại bỏ từ các tiêu chuẩn của HTML. Sử dụng thẻ datetime-local để thay thế.
Kiểu Input: DateTime-Local
Thẻ <input type=”datetime-local”> cho phép người sử dụng lựa chọn ngày và thời gian (không có múi giờ). Phụ thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường dữ liệu đầu vào.
Ví dụ 18:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của trình duyệt:<br>
Một bộ chọn ngày sẽ được hiển thị khi bạn nhập trường dữ liệu đầu vào.
</p>
<form action="action_page.php">
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
<p><strong>Note:</strong> type="time" không được hỗ trợ bởi Firefox, hoặc Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>Kiểu Input: Email
Thẻ <input type=”email”> được sử dụng cho các trường dữ liệu đầu vào có chứa một địa chỉ e-mail. Phụ thuộc vào sự hỗ trợ của các trình duyệt, địa chỉ e-mail có thể được tự động xác nhận khi gửi đến. Một vài smartphones có thể nhận ra các loại email, và bổ sung thêm “.com” vào bàn phím để phù hợp với dữ liệu đầu vào của email.
Ví dụ 19:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
<p><b>Note:</b> type="email" không được hỗ trợ bởi IE9 và các phiên bản trước đó.</p>
</body>
</html>Kiểu Input: Search
Thẻ <input type=”search”> được sử dụng cho phép người dùng tìm kiếm các trường (một trường search hoạt động thông thường như một trường text).
Ví dụ 20:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</form>
</body>
</html>Kiểu Input: Tel
Thẻ <input type=”tel”> được sử dụng cho các trường đầu vào có dữ liệu chứa một số điện thoại. Phần tử tel hiện nay chỉ được hỗ trợ trong trình duyệt Safari 8.
Ví dụ 21:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Telephone:
<input type="tel" name="usrtel">
<input type="submit">
</form>
<p><b>Note:</b> type="tel" chỉ được hỗ trợ trong trình duyệt Safari 8.</p>
</body>
</html>Kiểu Input: URL
Thẻ <input type=”url”> được sử dụng cho các trường đầu vào mà chứa địa chỉ URL. Phụ thuộc vào sự hỗ trợ của các trình duyệt, trường địa chỉ URL có thể tự động xác nhận khi gửi đến. Một vài smartphones nhận ra kiểu đầu vào URL, và bổ sung thêm “.com” vào bàn phím để phù hợp với địa chỉ đầu vào URL.
Ví dụ 22:
<!-- Opera, Safari, Chrome, Firefox, Internet Explorer -->
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Thêm trang web của bạn:
<input type="url" name="homepage">
<input type="submit">
</form>
<p><b>Note:</b> The type="url" không được hỗ trợ bởi IE9 và các phiên bản trước đó.</p>
</body>
</html>
Sử dụng CSS để tạo giao diện cho input
Để tạo giao diện cho các phần tử “input” trong HTML, bạn có thể sử dụng CSS để tùy chỉnh các thuộc tính, kiểu dáng và hiệu ứng của chúng. Dưới đây là một số ví dụ về cách sử dụng CSS để tạo giao diện cho các phần tử “input”:
- Định dạng cơ bản:
input { width: 200px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } Đoạn mã trên sẽ tạo ra các ô nhập văn bản cơ bản với kích thước, độ dày viền, góc bo và kích thước chữ được xác định.
- Tùy chỉnh màu sắc và nền:
input[type="text"] { background-color: #f2f2f2; color: #333; } input[type="submit"] { background-color: #007bff; color: #fff; cursor: pointer; } Đoạn mã trên tùy chỉnh màu sắc nền và màu chữ cho các ô nhập văn bản và nút gửi (submit) thông qua thuộc tính “type”.
- Áp dụng hiệu ứng khi tương tác:
input[type="text"]:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } input[type="checkbox"]:checked + label { font-weight: bold; } Đoạn mã trên sẽ áp dụng hiệu ứng khi ô nhập văn bản được tương tác (focus) và khi hộp kiểm được chọn (checked).
- Định dạng cho các loại “input” khác nhau:
input[type="text"] { /* ... */ } input[type="checkbox"] { /* ... */ } input[type="radio"] { /* ... */ } /* ... */ Bạn có thể áp dụng các kiểu dáng khác nhau cho các loại “input” phù hợp với thiết kế của bạn.
Lưu ý rằng đây chỉ là một số ví dụ cơ bản và bạn có thể tùy chỉnh CSS theo ý muốn của mình để tạo giao diện đẹp và phù hợp với thiết kế trang web của bạn.
Xem thêm Forms trong Laravel
Sử dụng JavaScript để xử lý input
Để xử lý các giá trị đầu vào từ phần tử “input” trong HTML, bạn có thể sử dụng JavaScript. JavaScript cung cấp các phương thức và sự kiện để truy cập, kiểm tra và xử lý dữ liệu từ các phần tử “input”. Dưới đây là một số ví dụ về cách sử dụng JavaScript để xử lý input:
- Truy cập giá trị đầu vào:
let inputElement = document.getElementById("myInput"); let value = inputElement.value; Trên đây, chúng ta sử dụng phương thức getElementById để truy cập phần tử “input” thông qua ID của nó, sau đó sử dụng thuộc tính value để lấy giá trị nhập vào trong ô nhập văn bản.
- Xử lý sự kiện khi người dùng nhập liệu:
let inputElement = document.getElementById("myInput");
inputElement.addEventListener("input", function() {
let value = inputElement.value; // Xử lý giá trị đầu vào
}); Trong ví dụ trên, chúng ta sử dụng sự kiện “input” để xử lý khi người dùng nhập liệu vào ô nhập văn bản. Mỗi khi người dùng thay đổi giá trị, hàm xử lý sẽ được gọi và chúng ta có thể thực hiện các thao tác xử lý dữ liệu cần thiết.
- Kiểm tra và xác thực dữ liệu đầu vào:
let inputElement = document.getElementById("myInput");
let value = inputElement.value;
if (value === "") {
alert("Vui lòng nhập giá trị!");
return;
} // Xử lý dữ liệu nhập vào khi hợp lệ Trong ví dụ trên, chúng ta kiểm tra xem giá trị nhập vào có rỗng hay không. Nếu rỗng, chúng ta hiển thị thông báo cảnh báo và dừng lại. Nếu giá trị hợp lệ, chúng ta có thể tiếp tục xử lý dữ liệu nhập vào.
Lưu ý rằng đây chỉ là một số ví dụ cơ bản và JavaScript cung cấp nhiều tính năng và phương thức khác để xử lý input. Bạn có thể tùy chỉnh theo yêu cầu cụ thể của mình và sử dụng các phương thức và sự kiện khác để thực hiện các tác vụ xử lý dữ liệu phức tạp hơn.
Xem thêm textarea trong html là gì ?
