Bài 27: Các kiểu Input trong HTML

Các kiểu Input trong HTML

Trong bài học này trình bày các kiểu đầu vào của phần tử  <input>.

Kiểu Input: text

<input type=”text”> sử dụng cho nhập dữ liệu đầu vào cho đầu vào dạng văn bản (một dòng):

Ví dụ 1:


<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>

<p>Chú ý rằng các form không thể tự nhận biết được các thuộc tính trong nó.</p>
<p>Lưu ý độ rộng mặc định của trường văn bản là 20 kí tự.</p>

</body>
</html>

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

First name:

Last name:

Kiểu Input: password

<input type=”password”> định nghĩa một trường password:

Ví dụ 2:


<!DOCTYPE html>
<html>
<body>

<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>

<p>Các kí tự trong trường password được ẩn đi (nó được mã hóa hiển thị thành hình sao hoặc các chấm tròn).</p>

</body>
</html>

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

User name:

User password:

Mách nhỏ Các kí tự trong trường password được ẩn đi (nó được mã hóa hiển thị thành hình sao hoặc các chấm tròn).

Kiểu Input: submit

<input type=”submit”> định nghĩa một nút để gửi dữ liệu từ form người sử dụng nhập tới nơi xử lý dữ liệu của form này (form-handler)

Form-handler thường mà một trang chạy ở phía server, được viết bằng các ngôn ngữ ở phía máy chủ như PHP, ASP.NET, JSP … cho xử lý dữ liệu đầu vào.

Form-handler được chỉ định bởi các thuộc tính  “action” trong form đó:

Ví dụ 3:


<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

<p>Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".</p>

</body>
</html>

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

Họ đệm:

Tên:

 

Nếu bạn bỏ qua thuộc tính value của nút Submit thì nút sẽ hiển thị với nhãn mặc định là “Submit”:

Ví dụ 4:


<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit">
</form>

</body>
</html>

Kiểu Input: radio

<input type=”radio”> định nghĩa một nút  radio.

Các nút Radio cho phép người sử dụng chọn duy nhất một lựa chọn trong danh sách các lựa chọn:

Ví dụ 5:


<!DOCTYPE html>
<html>
<body><form action="action_page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form></body>
</html>

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

Male
Female
Other

Kiểu Input: checkbox

<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 trong các lựa chọn đưa ra .

Ví dụ 6:


<!DOCTYPE html>
<html>
<body><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></body>
</html>

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

 Tôi có một chiếc xe đạp
 Tôi có một chiếc ô tô

Kiểu Input: button

<input type=”button”> định nghĩa một button:

Ví dụ 7:


<!DOCTYPE html>
<html>
<body><input type="button" onclick="alert('Website Tìm ở đây chào bạn!')" value="Kíchh Tôi!"></body>
</html>

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

Các kiểu đầu vào của HTML5

Dưới đây là một số kiểu đầu vào mới của HTML5 mới bổ sung:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Mách nhỏ Các kiểu đầu vào mới bổ sung này, không được hỗ trợ bởi các trình duyệt web cũ, chúng sẽ hoạt động như kiểu input dạng text.

Kiểu Input: number

Thẻ <input type=”number”> được sử dụng cho trường dữ liệu đầu vào có chứa các giá trị là số.

Bạn có thể cài đặt các giới hạn trong kiểu đầu vào này.

Tùy thuộc vào sự hỗ trợ của các trình duyệt mà các giới hạn này có thể áp dụng cho các trường dữ liệu đầu vào.

Ví dụ 8:

OperaSafariChromeFirefoxInternet Explorer


<!DOCTYPE html>
<html>
<body><p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
Các giới hạn Numeric 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></body>
</html>

Chọn giá trị (trong khoảng từ 1 tới 5):

Các giới hạn đầu vào

Dưới đây là danh sách một số các giới hạn đầu vào phổ biến( một vài giới hạn mới trong HTML5):

Thuộc tính Mô tả
disabled Xác định trường dữ liệu đầu vào bị vô hiệu hóa
max Xác định giá trị lớn nhất cho trường dữ liệu đầu vào
maxlength Xác định số lượng kí tự tối đa cho trường dữ liệu đầu vào
min Xác định giá trị nhỏ nhất cho trường dữ liệu đầu vào
pattern Xác định biểu thức chính quy để kiểm tra giá trị cho trường dữ liệu đầu vào
readonly Xác định trường dữ liệu đầu vào là chỉ đọc (không thể thay đổi)
required Xác định các yêu cầu của trường dữ liệu đầu vào(trường không thể để trống)
size Xác định độ rộng (theo các kí tự) của trường dữ liệu đầu vào
step Xác định các khoảng số hợp lí cho các trường dữ liệu đầu vào
value Xác định giá trị mặc định cho trường dữ liệu đầu vào

Bạn có thể tìm hiểu thêm và kĩ hơn các tuỳ chọn đầu vào trong các bài học tiếp theo.

Ví dụ 9:

OperaSafariChromeFirefoxInternet Explorer


<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
Các lỗi sẽ được khắc phục và áp dụng trong các trường dữ liệu đầu vào.
</p><form action="action_page.php">
Nhập giá trị:
<input type="number" name="points" min="0" max="100" step="10" value="30">
<input type="submit">
</form>
<p><b>Note:</b>type="number" không được hỗ trợ bởi IE9 .
</p>
</body>
</html>

Nhập giá trị:

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:

OperaSafariChromeFirefoxInternet 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>

Birthday:

Bạn có thể bổ sung thêm các giới hạn đầu vào:

Ví dụ 11:

OperaSafariChromeFirefoxInternet 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>

Enter a date before 1980-01-01:
Enter a date after 2000-01-01:

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:

OperaSafariChromeFirefoxInternet 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ác trình duyệt mà 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:

OperaSafariChromeFirefoxInternet 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 đó.
</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á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:

OperaSafariChromeFirefoxInternet Explorer


<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ 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>

Birthday (month and year):

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:

OperaSafariChromeFirefoxInternet 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>

Select a week:

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:

OperaSafariChromeFirefoxInternet 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>

Select a time:

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:

OperaSafariChromeFirefoxInternet 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>

Birthday (date and time):

Mách nhỏ Thẻ đầu vào datetime bị loại bỏ từ theo 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:

OperaSafariChromeFirefoxInternet Explorer


<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ 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 (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>

Birthday (date and time):

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:

OperaSafariChromeFirefoxInternet 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>

E-mail:

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:

OperaSafariChromeFirefoxInternet Explorer


<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</form>

</body>
</html>

Search Google:

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:

OperaSafariChromeFirefoxInternet 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>

Telephone:

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:

OperaSafariChromeFirefoxInternet 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>

Thêm trang web của bạn:

Các thẻ:

Có thể bạn sẽ thích…

4 phản hồi

  1. nguyen van nguyen viết:
    22/09/2018 lúc 2:38 chiều

    Tks admin

  2. KeniVinh viết:
    13/07/2019 lúc 11:33 chiều

    Cảm ơn tác giả

  3. Minh Hoàng viết:
    03/04/2020 lúc 10:06 chiều

    bài viết rất hay. cảm ơn tác giả.

  1. Bài 28: Các thuộc tính của thẻ Input | Tìm ở đây
    28/07/2016

    […] Các phần tử <input> với các giá trị min và max, xem lại bài 27: […]

Để lại một bình luận