Các loại dữ liệu đầu vào của phần tử input trong HTML

Bài viết giới thiệu các kiểu dữ liệu đầu vào cho phần tử <input> trong HTML.

Dữ liệu dạng văn bản

<input type="text"> xác định dữ liệu đầu vào dạng trường văn bản một dòng.

<form>
 Tên:<br>
 <input type="text" name="ten"><br>
 Họ:<br>
 <input type="text" name="ho">
</form>

Dữ liệu dạng mật khẩu

<input type="password"> định nghĩa trường điền mật khẩu.

<form>
 Tên người dùng:<br>
 <input type="text" name="nguoidung"><br>
 Mật khẩu:<br>
 <input type="password" name="matkhau">
</form>

Lưu ý: Kí tự trong trường mật khẩu sẽ bị che đi (bằng dấu sao hoặc chấm tròn)

Gửi biểu mẫu

<input type="submit"> định nghĩa nút để gửi biểu mẫu tới form-handler, thường là trang chủ có kịch bản xử lý dữ liệu đầu vào và được chỉ định bằng thuộc tính action. Nếu bỏ qua thuộc tính này, nút gửi sẽ hiển thị văn bản mặc định.

<form action="/action_page.php">
 Tên:<br>
 <input type="text" name="ten" value="Mickey"><br>
 Họ:<br>
 <input type="text" name="ho" value="Mouse"><br><br>
 <input type="submit" value="Submit">
</form>

Reset dữ liệu đầu vào

<input type="reset"> định nghĩa nút làm mới tất cả các giá trị trong biểu mẫu về giá trị mặc định.

<form action="/action_page.php">
 Tên:<br>
 <input type="text" name="ten" value="Mickey"><br>
 Họ:<br>
 <input type="text" name="ho" value="Mouse"><br><br>
 <input type="submit" value="Submit">
 <input type="reset">
</form>

Dữ liệu dạng nút tròn

<input type="radio"> định nghĩa nút tròn để chọn chỉ một đáp án trong các đáp án cho trước.

<form>
 <input type="radio" name="gioitinh" value="nam" checked> Nam<br>
 <input type="radio" name="gioitinh" value="nu"> Nữ<br>
 <input type="radio" name="gioitinh" value="khac"> Khác
</form>

Dữ liệu dạng checkbox

<input type="checkbox"> định nghĩa hộp checkbox, cho phép người dùng không chọn hoặc chọn nhiều đáp án

<form>
 <input type="checkbox" name="xe1" value="xedap"> Tôi có xe đạp<br>
 <input type="checkbox" name="xe2" value="oto"> Tôi có ô tô
</form>

.Dữ liệu dạng nút bấm

<input type="button"> định nghĩa nút bấm.

<input type="button" onclick="alert('Xin chào')" value="Click vào đây!">

Dữ liệu đầu vào của HTML5

HTML5 còn đưa thêm một số kiểu dữ liệu đầu vào khác (trình duyệt cũ không hỗ trợ thì chúng sẽ hoạt động như <input type=”text”>) gồm:

• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Màu dữ liệu đầu vào

<input type="color"> dùng để đổ màu trường nhập dữ liệu đầu vào. Tùy vào trình duyệt mà bảng màu sẽ xuất hiện.

<form>
 Chọn màu yêu thích của bạn:
 <input type="color" name="mauyeuthich">
</form>

Dữ liệu dạng ngày tháng

<input type="date"> định nghĩa trường dữ liệu ngày tháng. Tùy trình duyệt sẽ hiển thị công cụ chọn ngày tháng.

<form>
 Ngày sinh:
 <input type="date" name="sinhnhat">
</form>

Có thể dùng thuộc tính min và max để giới hạn ngày tháng.

<form>
 Nhập ngày trước 1980-01-01:
 <input type="date" name="ngaysinh" max="1979-12-31"><br>
 Nhập ngày sau 2000-01-01:
 <input type="date" name="ngaysinh" min="2000-01-02"><br>
</form>

Dữ liệu dạng ngày giờ địa phương

<input type="datetime-local"> định nghĩa ngày giờ trong trường dữ liệu, không dùng tới múi giờ. Tùy trình duyệt sẽ hiển thị công cụ chọn ngày giờ.

<form>
 Sinh nhật (ngày và giờ):
 <input type="datetime-local" name="giosinh ">
</form>

Dữ liệu dạng email

<input type="email"> định nghĩa dữ liệu đầu vào là địa chỉ email. Tùy theo trình duyệt có hỗ trợ không mà địa chỉ tự động được xác minh. Một số smartphone nhận diện email và thêm “.com” vào bàn phím.

<form>
 E-mail:
 <input type="email" name="email">
</form>

Dữ liệu là tập tin

<input type="file"> định nghĩa vùng chọn tập tin và nút “Duyệt” để chọn tập tin và tải lên.

<form>
 Chọn tập tin: <input type="file" name="myFile">
</form>

Dữ liệu dạng tháng

<input type="month"> cho phép người dùng chọn tháng và năm. Tùy trình duyệt có hỗ trợ không mà công cụ chọn ngày sẽ hiện ra.

<form>
 Sinh nhật (tháng và năm):
 <input type="month" name="thangsinh">
</form>

Dữ liệu dạng số

<input type="number"> định nghĩa trường dữ liệu dạng số, có thể giới hạn các con số được chấp thuận. Ví dụ dưới đây hiển thị trường nhập số, nhận giá trị từ 1 tới 5.

<form>
 Số lượng (từ 1 tới 5):
 <input type="number" name="soluong" min="1" max="5">
</form>

Giới hạn dữ liệu đầu vào

Dưới đây là danh sách một số thuộc tính giới hạn dữ liệu đầu vào, được đánh dấu * là thuộc tính mới trên HTML5.

Ví dụ dưới đây hiển thị trường dữ liệu số có thể nhập từ 0 tới 100, các giá trị cách nhau 10 đơn vị, giá trị mặc định 30.

<form>
 Số lượng:
 <input type="number" name="diem" min="0" max="100" step="10"value="30">
</form>

Dữ liệu trong một khoảng

<input type="range"> định nghĩa khi giá trị chính xác không quan trọng, ví dụ như dùng thanh trượt. Giá trị mặc định nằm trong khoảng từ 0 tới 100. Bạn có thể tự chọn khoảng bằng các thuộc tính min, max và step.

<form>
 <input type="range" name="diem" min="0" max="10">
</form>

Dữ liệu trường tìm kiếm

<input type="search"> dùng để định nghĩa trường tìm kiếm (giống trường nhập văn bản).

<form>
 Tìm kiếm trên Google:
 <input type="search" name="googlesearch">
</form>

Dữ liệu dạng số điện thoại

<input type="tel"> dùng để nhập số điện thoại và được hỗ trợ trên Safari 8.

<form>
 Số điện thoại:
 <input type="tel" name="usrtel">
</form>

Dữ liệu thời gian

<input type="time"> dùng để chọn thời gian (không theo múi giờ). Tùy trình duyệt có hỗ trợ không mà công cụ chọn thời gian sẽ hiện ra.

<form>
 Chọn thời gian:
 <input type="time" name="usr_time">
</form>

Dữ liệu dạng URL

<input type="url"> dùng cho trường dữ liệu có địa chỉ URL. Tùy trình duyệt có hỗ trợ không mà địa chỉ sẽ tự động được xác minh hợp lệ. Một số thiết bị điện thoại thông minh nhận diện URL và thêm “.com” vào bàn phím.

<form>
 Trang chủ:
 <input type="url" name="homepage">
</form>

Dữ liệu dạng tuần

<input type="week"> dùng để người dùng chọn tuần và năm. Tùy theo trình duyệt có hỗ trợ không mà công cụ chọn sẽ hiện ra.

<form>
 Chọn tuần:
 <input type="week" name="week_year">
</form>

Bài trước: Các phần tử của Form trong HTML 

Bài sau: Các thuộc tính của phần tử input trong HTML