Bai 9 Form

8/3/2019 Bai 9 Form

http://slidepdf.com/reader/full/bai-9-form 1/19

FORM

8/3/2019 Bai 9 Form


Cách sử dụng FORM trong HTML

Một form trong HTML bao gồm nhiều thànhphần (control) khác nhau.

Các control có thể là ô văn bản(text field), ô

kéo thả (combo box ), ô danh sách(list box),nút bấm(button),nút chọn(radio button) haycác ô check (checkbox)...

Tạo form bắt đầu bằng thẻ <form> và kết thúcbởi thẻ </form>. Giữa 2 cặp thẻ này, các bạncó thể sử dụng các cặp thẻ HTML khác.

8/3/2019 Bai 9 Form


Thẻ form có một số thuộc tính sau: - Method

Thuộc tính này thường có 2 giá trị POST hoặcGET, để xác định dữ liệu gửi lên theo kiểu POSThay GET .

-Action Là đường dẫn đến liên kết xử lý form ,quyết địnhcho hành động của form khi nút submit đượcnhấn.

Trong trường hợp thuộc tính này không đượckhai báo, form sẽ gửi thẳng dữ liệu và yêu cầuvề chính trang hiện hành (sau đó trình duyệt sẽtải lại nội dung mới).

8/3/2019 Bai 9 Form


Thí dụ : <form method = "post" action =“xuly.php">…

</form>Trong thí dụ là gửi dữ liệu tới flie xuly.php để xử lý

(Khi nhấn submit, web browser sẽ gọi đến file

thidu.php với tham số ứng với các thẻ HTML formfield. Mỗi tham số có dạng name=value. Trong đóname là tên thẻ, value là giá trị đã được nhập / chọn.)

8/3/2019 Bai 9 Form


Thí dụ các control nhập liệu

8/3/2019 Bai 9 Form


THẺ INPUT Thẻ input thuờng dùng để nhập liệu,có một số thuộc tính,mỗi thuộc tính sẽ quy định những chức năng riêng:

- Name: Chỉ định tên cho thẻ. Tên này sẽ được gửi lên máychủ cùng giá trị nhập vào cho thẻ. - Value: Xác định giá trị đặt trước cho thẻ. - Type:Thuộc tính này có một số giá trị thông thường như sau:

* submit: Sẽ xác định một nút bấm (submit) mà khi kíchchuột vào đó, form sẽ tự động kích hoạt và gửi dữ liệu đi

* text: Hiển thị một ô văn bản cho phép người sử dụngnhập văn bản

* password: Hiển thị ô văn bản để nhập password. * reset: Xóa bỏ nhập liệu , nhập lại * radio,checkbox: Tạo các nút chọn lựa

- Size : Chiều dài của hộp nhập liệu

8/3/2019 Bai 9 Form


Thí dụ: đoạn code sau tạo ra một form có 1 ô văn bản (text box), 1 ô nhập mật khẩu (password) và 1 nút bấm (button)

<pre><form method="POST">Nhập User Name :<input type="text" name="Ten” size="35"> Nhập Password :<input type="password“ name="MM” size="20">

<input type="submit" value="HoànTất" name="S"> </form></pre>

8/3/2019 Bai 9 Form


8/3/2019 Bai 9 Form


Thẻ tạo hộp chọn đổ xuống (combo box): Để tạo một hộp chọn đổ xuống, ta phải sử dụng 2 thẻ:

Thẻ Select và thẻ Option như sau: <Select name =xxx> <option value = gia_trị 1>nội dung 1</option> <option value = gia_trị 2>nội dung 2</option> .....<option value = gia_trị n>nội dung n</option> </Select> Trong đó: Thẻ Select với thuộc tính name sẽ xác định tên của hộp danh

sách đổ xuống. Các thẻ option xác định giá trị của tên biến trong thẻ selectnếu được chọn. (Giá trị sẽ được gán vào biến được địnhnghĩa trong thẻ select.)

8/3/2019 Bai 9 Form


Thí dụ: Giới Tính:<Select name ="gt">

<option value =1>Nam </option><option value =0>Nữ </option> </select>

Khi người dùng kích chọn Nam thì giá trị 1 sẽ đượcchuyển vào biến gt (được định nghĩa trong thẻ Select).

8/3/2019 Bai 9 Form


Hảng xe bạn ưa thích <select name="cars">

<option value="honda">Honda</option><option value=“yamaha">Yamaha</option> <option value="fiat” selected>Fiat</option><option value="audi">Audi</option></select>

8/3/2019 Bai 9 Form


Hảng xe bạn ưa thích <select name="cars” multiple size=“5" >

<option value="honda">Honda</option><option value=“yamaha">Yamaha</option> <option value="fiat” >Fiat</option> <option value="audi">Audi</option></select>

Tạo List box

8/3/2019 Bai 9 Form


Thẻ lựa chọn (radio button) Hiển thị một danh sách các nút tròn, chỉ được chọn mộttrong các nút đó.

Dùng thẻ input với type = radio. Một nhóm các nút radionày sẽ được thiết lập nếu như thuộc tính name của chúngtrùng nhau:Code dưới đây mô phỏng chọn kiểu gõ Telex hay VNI :

Chọn kiểu gỏ : <input type=radio name="s" checked value="T" >Telex<input type=radio name="s" value="V"> VNI

8/3/2019 Bai 9 Form


Thẻ lựa chọn (check box)

<input type="checkbox" value="1" name="TV"> Xem TV

<input type="checkbox" value="2" name="Sach"> Đọc sách <input type="checkbox" value="3" name="DuLich"> Du Lịch

8/3/2019 Bai 9 Form


Thẻ nhập văn bản Thẻ input với thuộc tính type = text chỉ cho phép tahiển thị ra một ô văn bản nhỏ (hiện được 1 dòng).

Thí dụ : Nhập User Name : <input type="text" name="Ten" size="35"> Nhập Password : <input type="password" name="MM"

size="20"><input type="submit" value="HoànTất" name="S">

8/3/2019 Bai 9 Form


Để hiện ra một ô soạn thảo lớn, hiển thị nhiềudòng ta phải dùng thẻ textarea<textarea cols=xxx rows=xxx name =xxx>Giá trị mặc định của khối văn bản </textarea>

Ghi chú :rows (chiều cao) và cols(chiều ngang)

cho phép bạn định kích cỡ của hộp soạn thảo.

8/3/2019 Bai 9 Form


Thí dụ : Góp ý của bạn :

<textarea cols="10" rows="3" name=“ykien"> Viết vào đây </textarea>

8/3/2019 Bai 9 Form


CHÚ Ý•Trong trang html có thể có nhiều thẻ <form> … </form> •Các thẻ form trong cùng trang web độc lập nhau

•Khi submit, mỗi form chỉ gửi đến server thông tin cácform fields trong phạm vi của form đó

8/3/2019 Bai 9 Form


Bài tập

Bai 9 Form

Documents

Transcript of Bai 9 Form