Nội dung bài viết
STDIO Đối với một website thông thường sẽ không thể thiếu được những thẻ input. Vậy những thẻ input này có tác dụng như thế nào mà nó lại cần thiết đến như vậy. Thì thẻ input là một trong những thẻ được HTML cung câp để cho người dùng có thể nhập dữ liệu và có thể thoa tác với trang web và trang web đó sẽ lấy nội dung từ những input này và xử lý theo yêu cầu của người dùng ở phía server-side. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu những thẻ input thường dùng như text, password...

Giới thiệu

Đối với một website thông thường sẽ không thể thiếu được những thẻ input. Vậy những thẻ input này có tác dụng như thế nào mà nó lại cần thiết đến như vậy. Thì thẻ input là một trong những thẻ được HTML cung cấp để cho người dùng có thể nhập dữ liệu và có thể thao tác với trang web và trang web này sẽ lấy nội dung từ những input và xử lý theo yêu cầu của người dùng ở phía server-side. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu những thẻ input thông thường dùng như text, password...

Tiền đề bài viết

Bài viết nằm trong CHƯƠNG TRÌNH TỰ HỌC HTML của STDIO :: www.stdio.vn do tác giả Nguyễn Nghĩa biên soạn.

Đối tượng hướng đến

Lập trình viên mới bắt đầu lập trình web cơ bản với HTML và đã xem qua các bài viết trước trong chuỗi bài viết về HTML.

Cấu trúc thẻ input

Thẻ input được HTML hổ trợ với cấu trúc như sau:

<input type="" name="" />

Với:

input: là thẻ được định nghĩa trong html.

type: là kiểu của input, có thể là text, password, email, button, submit. Sẽ tìm hiểu kĩ hơn ở phần sau.

name: thuộc tính này sử dụng để trang web có thể lấy được giá trị của input và sử lý ở phía server-side.

Các loại thẻ input sẽ có những thuộc tính khác nhau.

Các thẻ input thông dụng

Nếu bạn nào đã từng lập trình Windows Form thì với những thẻ input này các bạn có thể thấy chúng hoàn toàn tương tự nhau, như radio, checkbox, text mà tôi sẽ trình bày dưới đây.

text

text là input dùng để nhập dữ liệu dưới dạng văn bản trên một dòng:

First Name
<br />
<input type="text" name="firstName" />
<br />
Last Name
<br />
<input type="text" name="lastName" />

Kết quả

ss_1

password

Tương tự text thì password là thẻ input cho phép người dùng nhập văn bản nhưng văn bản nhập vào sẽ hiện thị dấu *. Thông thường được dùng cho trường hợp người dùng nhập mật khẩu.

User Name
<br />
<input type="text" name="username" />
<br />
Password
<br />
<input type="password" name="password" />

Kết quả

ss_2

radio

Tiếp theo là một input mà các bạn có thể dễ dàng thấy khi đăng kí thành viên của diễn đàn đó là radio. Thẻ input radio cho phép người dùng chọn một trong nhiều sự lựa chọn ví dụ như giới tính...

Gender
<br />
<input type="radio" name="gender" value="male" checked />Male
<br />
<input type="radio" name="gender" value="female" />Female

Kết quả

ss_3

checkbox

Cũng tương tự như radio thì checkbox cho phép người dùng có nhiều sự lựa chọn khác nhau.

Order Products
<br />
<input type="checkbox" name="iphone6" value="iphone6"  />Iphone 6
<br />
<input type="checkbox" name="iphone6s" value="iphone6s"  />Iphone 6s
<br />
<input type="checkbox" name="galaxys4" value="galaxys4" />Galaxy S4

Kết quả

ss_4

button

Thẻ input button định nghĩa cho chúng ta một button cho phép người dùng click vào.

<input type="button" onclick="alert('Welcome you to stdio.vn')" value="Click Me!" />

Trong ví dụ này tôi gán sự kiện onclick của button với một phương thức có chức năng hiển thị hộp thoại có dòng chữ Welcome you to stdio.vn.

ss_5

Kết quả sau khi nhấn vào button Click Me!

ss_6

file

file là input cho phép người dùng chọn file từ máy tính của mình.

<input type="file" name="file" />

Kết quả

ss_8

Hộp thoại được mở lên khi bạn click vào Chọn tập tin...

ss_10

Trên đây chúng ta đã tìm hiểu một số input cơ bản. Tiếp theo chúng ta chúng ta sẽ cùng tìm hiểu một số thẻ input được HTML5 cung cấp. Nếu trình duyệt không hổ trợ HTML5 thì trình duyệt sẽ hiểu các thẻ input đó như là những dòng văn bản.

number

number là input cho phép người dùng chọn lựa những giá trị số trong khoảng xác định.

<input type="number" name="quality" min="0" max="10"  />

Với min là giới hạn dưới, max là giới hạn trên, giá trị mà người dùng chọn chỉ có thể nằm trong khoảng mix -> max.

Kết quả

ss_7

color

Để lấy mã màu html có hổ trợ cho chúng ta input color với cú pháp sử dụng như sau

Color Dialog <br />
<input type="color" name="color" />

Kết quả

ss_9

Hộp thoại Color được mở lên

ss_11

email

email là input khá dễ dàng sử dụng, input này cho phép người dùng nhập email.

Email<br />
<input type="email" name="email" />

Kết quả

ss_12

Ngoài những input này thì HTML5 còn có hổ trợ rất nhiều thẻ input khác như data, datetime, time, search, month, week...Các bạn có thể tìm hiểu thêm để có thể giúp ích cho các bạn trong quá trình phát triển website.

Lời kết

Qua bài viết này, tôi đã giới thiệu một số thẻ input thường xuyên được sử dụng trong website ở mức độ cơ bản. Cách xử lý những input này như thế nào sẽ được giới thiệu ở bài viết HTML - Phần 8: Thẻ Form Trong HTML.

THẢO LUẬN
ĐÓNG