HTML Form

HTML Form

HTML FormHTML Formthangld@uit.edu.vnthangld@uit.edu.vnKhoa Mạng máy tính và Truyền thôngKhoa Mạng máy tính và Truyền thôngĐại học Công nghệ Thông tinĐại học Công nghệ Thông tin Nội dungNội dungFormsFormsTEXT FieldsTEXT FieldsButtonsButtonsCheckboxesCheckboxesRadio buttonsRadio buttonsMultiline TextMultiline TextHidden FieldsHidden Fields Tạo FormTạo FormMỗi HTML Form được tạo lập bằng cặp Mỗi HTML Form được tạo lập bằng cặp thẻ <FORM>, </FORM>thẻ <FORM>, </FORM>Thẻ Form cần 2 thuộc tính bắt buộcThẻ Form cần 2 thuộc tính bắt buộcMETHOD: chỉ định phương thức HTTP METHOD: chỉ định phương thức HTTP (POST/GET) được sử dụng để gửi yêu cầu (POST/GET) được sử dụng để gửi yêu cầu đến server khi người dùng submit formđến server khi người dùng submit formACTION: chỉ định URI đích nhận và xử lý dữ ACTION: chỉ định URI đích nhận và xử lý dữ liệu trên formliệu trên form Ví dụVí dụ<FORM METHOD=“POST” ACTION=“http://www.foo.com/servlet/myservlet”><FORM METHOD=“GET” ACTION=“/servlet/myservlet”><FORM METHOD=“POST” ACTION=“myjsp.jsp”> Form FieldsForm FieldsCác field được định nghĩa trong cặp thẻ Các field được định nghĩa trong cặp thẻ <FORM> tạo nên nội dung của Form<FORM> tạo nên nội dung của FormCác field được định nghĩa bằng các thẻCác field được định nghĩa bằng các thẻCó nhiều loại field có thể đặt vào form:Có nhiều loại field có thể đặt vào form:Text fields: text, password, textareaText fields: text, password, textareaRadio buttonsRadio buttonsCheckboxesCheckboxesButtons: submit, reset và button thông thườngButtons: submit, reset và button thông thườngHidden fieldHidden field Input FieldsInput FieldsCó nhiều loại field cho phép người dùng Có nhiều loại field cho phép người dùng nhập dữ liệu dạng chuỗi ký tựnhập dữ liệu dạng chuỗi ký tựCác field này được tạo lập sử dụng thẻ Các field này được tạo lập sử dụng thẻ <INPUT> với thuộc tính TYPE cụ thể khác <INPUT> với thuộc tính TYPE cụ thể khác nhaunhauThuộc tính TYPE có thể là: TEXT, Thuộc tính TYPE có thể là: TEXT, PASSWORD, HIDDEN, FILE, …PASSWORD, HIDDEN, FILE, …Mỗi thẻ INPUT phải có thuộc tính NAMEMỗi thẻ INPUT phải có thuộc tính NAME TEXT FieldsTEXT FieldsTEXT là loại INPUT field thông dụngTEXT là loại INPUT field thông dụngCho phép người dùng nhập vào 1 dòng Cho phép người dùng nhập vào 1 dòng văn bảnvăn bảnMột số thuộc tính khác sử dụng cho Một số thuộc tính khác sử dụng cho TEXT field:TEXT field:MAXLENGTHMAXLENGTHSIZESIZEVALUEVALUE Ví dụVí dụ<INPUT TYPE=TEXT NAME=FOO> <INPUT TYPE=“TEXT” NAME=“Name” SIZE=10 MAXLENGTH=20 VALUE=“John Henry”> Ví dụVí dụ<FORM METHOD=“POST”ACTION=“/servlet/register”>Your Name: <INPUT TYPE=“TEXT” NAME=“Name”><BR>Your Age:<INPUT TYPE=“TEXT” NAME=”Age”><BR></FORM> Submission ButtonsSubmission ButtonsNút nhấn submit dữ liệu trên form là một loại Nút nhấn submit dữ liệu trên form là một loại INPUT fieldINPUT fieldKhi người dùng nhấn nút submit trên form, Khi người dùng nhấn nút submit trên form, browser sẽ gửi toàn bộ nội dung của các browser sẽ gửi toàn bộ nội dung của các field trên form đến server sử dụng hai thuộc field trên form đến server sử dụng hai thuộc tính METHOD và ACTION của formtính METHOD và ACTION của form<INPUT TYPE=“SUBMIT VALUE=“Press me”> [...]... (tên=giá-trị)  Query string được encode theo kiểu URL- Query string được encode theo kiểu URL- encode encode Tạo Form Tạo Form  Mỗi HTML Form được tạo lập bằng cặp Mỗi HTML Form được tạo lập bằng cặp thẻ < ;FORM& gt;, < /FORM& gt; thẻ < ;FORM& gt;, < /FORM& gt;  Thẻ Form cần 2 thuộc tính bắt buộc Thẻ Form cần 2 thuộc tính bắt buộc  METHOD: chỉ định phương thức HTTP METHOD: chỉ định phương thức HTTP (POST/GET)... Tables và Forms Tables và Forms  Table thường được sử dụng để trình bày Table thường được sử dụng để trình bày các field trên form đẹp mắt hơn các field trên form đẹp mắt hơn HTML Form HTML Form thangld@uit.edu.vn thangld@uit.edu.vn Khoa Mạng máy tính và Truyền thơng Khoa Mạng máy tính và Truyền thơng Đại học Cơng nghệ Thơng tin Đại học Công nghệ Thông tin Submit form Submit form  Khi... name=movies value=1> Form Fields Form Fields  Các field được định nghĩa trong cặp thẻ Các field được định nghĩa trong cặp thẻ < ;FORM& gt; tạo nên nội dung của Form < ;FORM& gt; tạo nên nội dung của Form  Các field được định nghĩa bằng các thẻ Các field được định nghĩa bằng các thẻ  Có nhiều loại field có thể đặt vào form: Có nhiều loại field có thể đặt vào form:  Text fields: text, password,... dữ liệu trên form là một loại Nút nhấn submit dữ liệu trên form là một loại INPUT field INPUT field  Khi người dùng nhấn nút submit trên form, Khi người dùng nhấn nút submit trên form, browser sẽ gửi toàn bộ nội dung của các browser sẽ gửi toàn bộ nội dung của các field trên form đến server sử dụng hai thuộc field trên form đến server sử dụng hai thuộc tính METHOD và ACTION của form tính METHOD... thức HTTP (POST/GET) được sử dụng để gửi yêu cầu (POST/GET) được sử dụng để gửi yêu cầu đến server khi người dùng submit form đến server khi người dùng submit form  ACTION: chỉ định URI đích nhận và xử lý dữ ACTION: chỉ định URI đích nhận và xử lý dữ liệu trên form liệu trên form Checkboxes Checkboxes  Mỗi checkbox có một tên và một giá trị và Mỗi checkbox có một tên và một giá trị và có... submit trên 1 Khi người dùng nhấn vào nút submit trên 1 form: form:  Browser sử dụng các thuộc tính ACTION và Browser sử dụng các thuộc tính ACTION và METHOD để tạo ra một yêu cầu METHOD để tạo ra một yêu cầu  Một query string được hình thành ứng với mỗi Một query string được hình thành ứng với mỗi field trên form (tên=giá-trị) field trên form (tên=giá-trị)  Query string được encode theo kiểu... khác request từ browser như các field khác <INPUT TYPE=HIDDEN NAME=SECRET VALUE=AGENT> Ví dụ Ví dụ < ;FORM METHOD=“POST” ACTION=“http://www.foo.com/servlet/myservlet” > < ;FORM METHOD=“GET” ACTION=“/servlet/myservlet”> < ;FORM METHOD=“POST” ACTION=“myjsp.jsp”> Ví dụ Ví dụ < ;FORM METHOD=POST ACTION=“servlet/register”> <TABLE><TR> <TD>Your Name: </TD> ... ACTION của form tính METHOD và ACTION của form <INPUT TYPE=“SUBMIT VALUE=“Press me”> Ví dụ Ví dụ < ;FORM METHOD=“POST” ACTION=“/servlet/register”> Your Name: <INPUT TYPE=TEXT NAME=“Name”><BR> Your Age: <INPUT TYPE=TEXT NAME=”Age”><BR> <INPUT TYPE=SUBMIT VALUE=“Submit”> <INPUT TYPE=RESET VALUE=“Clear”> < /FORM& gt; Input Fields Input Fields  Có... dùng nhập vào 1 dịng văn bản văn bản  Một số thuộc tính khác sử dụng cho Một số thuộc tính khác sử dụng cho TEXT field: TEXT field:  MAXLENGTH MAXLENGTH  SIZE SIZE  VALUE VALUE Submit form Submit form  Mỗi checkbox được chọn sẽ có một cặp Mỗi checkbox được chọn sẽ có một cặp (tên=giá-trị) được tạo ra và gửi đến server. (tên=giá-trị) được tạo ra và gửi đến server. Nếu checkbox không được... <INPUT TYPE=TEXT NAME=”Age”></TD> </TR><TR> <TD><INPUT TYPE=SUBMIT VALUE=“Submit”></TD> <TD><INPUT TYPE=RESET></TD> </TR></TABLE> < /FORM& gt; . Fields Tạo FormTạo Form Mỗi HTML Form được tạo lập bằng cặp Mỗi HTML Form được tạo lập bằng cặp thẻ < ;FORM& gt;, < /FORM& gt;thẻ < ;FORM& gt;, < /FORM& gt;Thẻ. ACTION=“myjsp.jsp”> Form FieldsForm FieldsCác field được định nghĩa trong cặp thẻ Các field được định nghĩa trong cặp thẻ < ;FORM& gt; tạo nên nội dung của Form& lt ;FORM& gt;