Bài 26: Xử lý các giá trị input trong form

Các loại đầu vào

Chương này mô tả các loại đầu vào của <input> phần tử.

---

Input Type: text

<input type = "text"> định nghĩa một lĩnh vực đầu vào một dòng cho đầu vào văn bản:

Thí dụ

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

Họ: 

Last name: 

---

Loại đầu vào: mật khẩu

<input type = "password"> định nghĩa một lĩnh vực mật khẩu:

Thí dụ

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

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

Tên người dùng: 

Mật khẩu người dùng: 

	Các nhân vật trong một lĩnh vực mật khẩu được che (hiển thị như hoa thị hay vòng tròn).

---

Loại đầu vào: submit

<input type = "submit"> định nghĩa một nút để gửi mẫu đầu vào cho một hình thức-xử lý.

Các hình thức xử lý-thường là một máy chủ trang với một kịch bản để xử lý dữ liệu đầu vào.

Các hình thức-xử lý được quy định trong thuộc tính action của form:

Thí dụ

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

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

Họ:

Last name:

Nếu bạn bỏ qua thuộc tính giá trị các nút gửi của, nút sẽ có được một văn bản mặc định:

Thí dụ

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

---

Loại đầu vào: radio

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

nút radio để cho một người sử dụng chọn ONLY ONE của một số giới hạn các lựa chọn:

Thí dụ

<form>
  <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
</form>

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

 Nam giới 
 Phái nữ 
 khác 

---

Loại đầu vào: hộp kiểm

<input type = "checkbox"> định nghĩa một hộp kiểm.

Hộp kiểm cho phép người dùng chọn ZERO hoặc THÊM tùy chọn của một số giới hạn các lựa chọn.

Thí dụ

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

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

---

Loại đầu vào: nút

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

Thí dụ

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

---

HTML5 loại đầu vào

HTML5 thêm một số loại đầu vào mới:

• màu
• ngày
• ngày giờ
• datetime-địa phương
• e-mail
• tháng
• con số
• phạm vi
• Tìm kiếm
• tel
• thời gian
• url
• tuần

	loại đầu vào, không được hỗ trợ bởi các trình duyệt web cũ, sẽ cư xử như kiểu nhập văn bản.

---

Loại đầu vào: số

<Input type = "number"> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một giá trị số.

Bạn có thể thiết lập các hạn chế về số lượng.

Tùy thuộc vào sự hỗ trợ trình duyệt, các hạn chế có thể áp dụng cho các lĩnh vực đầu vào.

Thí dụ

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

---

Hạn chế đầu vào

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

Attribute	Description
disabled	Specifies that an input field should be disabled
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of character for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value against
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in characters) of an input field
step	Specifies the legal number intervals for an input field
value	Specifies the default value for an input field

Bạn sẽ tìm hiểu thêm về các hạn chế đầu vào trong các chương tiếp theo.

Thí dụ

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

---

Loại đầu vào: ngày

<Input type = "date"> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một ngày.

Tùy thuộc vào sự hỗ trợ trình duyệt, một bảng chọn ngày có thể hiển thị trong các lĩnh vực đầu vào.

Thí dụ

<form>
  Birthday:
  <input type="date" name="bday">
</form>

Bạn có thể thêm các hạn chế đầu vào:

Thí dụ

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

---

Loại đầu vào: màu

<Input type = "màu"> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một màu.

Tùy thuộc vào sự hỗ trợ trình duyệt, một bảng chọn màu sắc có thể hiển thị trong các lĩnh vực đầu vào.

Thí dụ

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

---

Loại đầu vào: phạm vi

<Input type = "vi"> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một giá trị trong một phạm vi.

Tùy thuộc vào sự hỗ trợ trình duyệt, các lĩnh vực đầu vào có thể được hiển thị như một điều khiển thanh trượt.

Thí dụ

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

Bạn có thể sử dụng các thuộc tính sau đây để xác định các hạn chế: min, max, bước, giá trị.

---

Loại đầu vào: tháng

<Input type = "tháng"> cho phép người dùng lựa chọn một tháng và năm.

Tùy thuộc vào sự hỗ trợ trình duyệt, một bảng chọn ngày có thể hiển thị trong các lĩnh vực đầu vào.

Thí dụ

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

---

Loại đầu vào: Tuần

<Input type = "tuần"> cho phép người dùng lựa chọn một tuần và năm.

Tùy thuộc vào sự hỗ trợ trình duyệt, một bảng chọn ngày có thể hiển thị trong các lĩnh vực đầu vào.

Thí dụ

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

---

Loại đầu vào: thời gian

<Input type = "thời gian"> cho phép người dùng lựa chọn một thời gian (không có múi giờ).

Tùy thuộc vào sự hỗ trợ trình duyệt, chọn một thời gian có thể xuất hiện trong các lĩnh vực đầu vào.

Thí dụ

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

---

Loại đầu vào: datetime

<Input type = "datetime"> cho phép người dùng lựa chọn một ngày và thời gian (với múi giờ).

Thí dụ

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

	Các loại đầu vào datetime được lấy ra từ các tiêu chuẩn HTML. Sử dụng datetime-địa phương để thay thế.

---

Loại đầu vào: datetime-địa phương

<Input type = "datetime địa phương"> cho phép người dùng lựa chọn một ngày và thời gian (không có múi giờ).

Tùy thuộc vào sự hỗ trợ trình duyệt, một bảng chọn ngày có thể hiển thị trong các lĩnh vực đầu vào.

Thí dụ

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

---

Loại đầu vào: email

<Input type = "email"> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một địa chỉ e-mail.

Tùy thuộc vào sự hỗ trợ trình duyệt, địa chỉ e-mail có thể được tự động xác nhận khi nộp.

Một số điện thoại thông minh nhận ra các loại thư điện tử, và cho biết thêm ".com" vào bàn phím để phù hợp với đầu vào email.

Thí dụ

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

---

Loại đầu vào: tìm kiếm

<Input type = "tìm kiếm"> được sử dụng cho các lĩnh vực tìm kiếm (một lĩnh vực tìm kiếm hoạt động như một trường văn bản thường).

Thí dụ

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

---

Loại đầu vào: tel

<Input type = "tel"> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một số điện thoại.

Các loại điện thoại hiện đang được hỗ trợ chỉ trong Safari 8.

Thí dụ

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

---

Loại đầu vào: url

<Input type = "url"> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một địa chỉ URL.

Tùy thuộc vào sự hỗ trợ trình duyệt, các lĩnh vực url có thể được tự động xác nhận khi nộp.

Một số điện thoại thông minh nhận loại url, và cho biết thêm ".com" vào bàn phím để phù hợp với đầu vào url.

Thí dụ

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>