Phần 1: HTML | Bài 8: HTML form và trường nhập liệu

HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau của người dùng.

Ví dụ

Text fields
Cách tạo những trường chữ trong một trang HTML. Người dùng có thể viết chữ trong trường chữ.

Trường mật khẩu

Form

Một form là một vùng mà nó bao gồm những thành phần của form. Thành phần của form là những thành phần cho phép người dùng có thể điền thông tin như là trường chữ, menu thả xuống, nút radio, và các hộp kiểm vào một form.

Một form được xác định bởi thẻ <form>

<form>
<input>
<input>
</form>

Nhập liệu
Thẻ form được sử dụng nhiều nhất là thẻ <input>. Loại dữ liệu nhập vào sẽ được xác định bởi thuộc tính của nó. Những trường nhập liệu được sử dụng nhiều nhất được giải thích ở dưới đây.

Text field
Text field được sử dụng khi bạn muốn người dùng đánh chữ, số v.v.. vào một form.

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

Nó sẽ xuất hiện như sau trong trình duyệt

First name:

 Last name:

Bạn chú ý rằng bản thân của form thì bị ẩn đi. Hơn nữa trên hầu hết các trình duyệt trường text được mặc định là 20 ký tự.

Nút radio
Nút radio được sử dụng khi bạn muốn người dùng chọn một trong những lựa chọn bạn đưa ra.

<form>
<input type=”radio” name=”sex” value=”male”> Male
<br>
<input type=”radio” name=”sex” value=”female”> Female
</form>

Nó sẽ xuất hiện như sau trên trình duyệt

 Male

 Female

Chú ý rằng chỉ có một lựa chọn có thể được chọn.

Hộp kiểm
Hộp kiểm được sử dụng khi bạn muốn người chọn có thể chọn nhiều lựa chọn hơn.

<form>
<input type=”checkbox” name=”bike”>
I have a bike
<br>
<input type=”checkbox” name=”car”>
I have a car
</form>

Nó sẽ như sau trong trình duyệt

 I have a bike

 I have a car

Thuộc tính hoạt động cùa form và nút Submit.
Khi người dùng nhấp chuột vào nút “submit”, nội dung của form đó sẽ được gửi đến một tệp tin khác. Thuộct ính hoạt động của form xác định tên của file mà nó sẽ gửi nội dung đến. Tệp tin đó được xác định trong thuộc tính hoạt động của form và thường thì nó sẽ có những hành động với dữ liệu nó nhận được.

<form name=”input” action=”html_form_action.asp”
method=”get”>
Username:
<input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>

Trong trình duyệt nó nhìn như sau

Username:

Khi bạn gõ tên bạn vào trường chữ ở trên và nhấp vào nút Submit, bạn sẽ gửi thông tin đó vào một trang gọi là “html_form_action.asp”. Trang đó sẽ chỉ cho bạn thấy dữ liệu nhận được.

Thêm một vài ví dụ

Hộp kiểm

Radio buttons

Menu thả xuống

Một dạng menu thả xuống khác

Vùng chữ

Tạo một nút bấm

Fieldset xung quanh dữ liệu

Ví dụ về form

Form với trường nhập liệu và nút Submit
Cách chèn form vào một trang, form chứa 2 trường nhập liệu và một nút submit.

Form với hộp kiểm

Form với radio buttons

Gửi email từ một form

Thẻ của form

Tag Mô Tả
<form> Kiểu form để nhập thông tin
<input> Một ô nhập liệu
<textarea> Vùng nhập liệu có nhiều hàng
<label> Nhãn
<fieldset> Nhóm các vùng nhập với nhau
<legend> nhản của 1 fieldset
<select> Danh sách chọn
<optgroup> nhóm các phần tử trong danh sách chọn
<option> 1 phần tử trong danh sách chọn
<button> Nút bấm
<isindex> Hết hỗ trợ. Dùng <input> thay thế
FOLLOW US

Leave a Reply

Your email address will not be published. Required fields are marked *