24/05/2018, 17:09
Thực hành sử dụng các biểu mẫu và khung trong HTML
Kết thúc chương này, bạn có thể: Sử dụng biểu mẫu và các phần tử nhập liệu HTML Sử dụng khung trong tài liệu HTML Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội ...
Kết thúc chương này, bạn có thể:
- Sử dụng biểu mẫu và các phần tử nhập liệu HTML
- Sử dụng khung trong tài liệu HTML
- Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.Tạo một thư mục, HTML-DHTML-JS-Examples trong ổ đĩa D: và lưu tất cả các file .html chỉ trong thư mục này. (Nếu không có đĩa D, hãy tạo trong ổ đĩa C:)
- Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”.
- Gõ đoạn mã ở ví dụ 1
- Kích vào File chọn Save As
- Lưu file với đuôi .html trong thư mục D:HTML-DHTML-JS-Examples. Chọn tên thích hợp, ví dụ, lab21 (Lab21 để biết đây là ví dụ 1 trong bài Lab 2)
Hoặc
- Lưu nó trong thư mục đăng nhập của mình
- Mở Internet Explorer.
- Kích vào File → Open, chọn Browse và chọn file từ thư mục D:HTML-DHTML-JS-Examples
Sử dụng biểu mẫu
Kiểm tra từ ví dụ 1 đến ví dụ 6 trong chương 7. Từng ví dụ nói riêng lẻ về từng phần tử khác nhau trong biểu mẫu. Các ví dụ sau đây tập trung các phần tử đó lại trong một biểu mẫu.
Đoạn mã HTML tạo một biểu mẫu đơn giản
<HTML>
<BODY>
<FORM>
<CENTER>
<CAPTION ALIGN="TOP"><H2>APPLICATION </H2></CAPTION>
</CENTER>
<LABEL for="EName">First Name </LABEL>
<INPUT TYPE="TEXT" NAME="EName" SIZE="30" MAXLENGTH="30" VALUE="">
<p> Education
<INPUT TYPE="CHECKBOX" NAME="Graduate" CHECKED>Graduate
<INPUT TYPE="CHECKBOX" NAME="Post Graduate">Post Graduate
<P> Gender
<INPUT TYPE = "RADIO" NAME = "Gender" VALUE = "Male" CHECKED> Male
<INPUT TYPE = "RADIO" NAME = "Gender" VALUE = "Female"> Female
<P> Salary
<INPUT TYPE="TEXT" NAME="Salary" SIZE="10" MAXLENGTH="10" VALUE="">
<P> Remarks
<TEXTAREA ROWS=3 COLS=30> Type your text here </TEXTAREA>
<P> Country
<SELECT NAME="Country">
<OPTION>America
<OPTION SELECTED>Australia
</SELECT>
<P Align=CENTER>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
<INPUT TYPE="RESET" VALUE="RESET">
</FORM>
</BODY>
<HTML>
Kết quả đoạn mã trên như hình 1
Kết quả ví dụ 1
Đoạn mã HTML minh họa việc sử dụng thứ tự tab và phím tắt để truy cập biểu mẫu
<HTML>
<HEAD>
<TITLE>Job application</TITLE>
</HEAD>
<BODY>
<H1><CENTER><FONT SIZE = 4 COLOR = Forestgreen> Application Form</CENTER></FONT></H1>
<HR>
<BR>
<FORM action=”http://somesite.com/processform” method=”post”>
<P>
<LABEL for="firstname">Name: </LABEL>
<INPUT accesskey = "N" tabindex = 1 type="text" id="firstname"><BR>
<P>Area of Interest
<BR><BR>
<INPUT tabindex = 2 TYPE=RADIO NAME="CONTROL1" VALUE="0" CHECKED>Web Designer
<INPUT tabindex = 2 TYPE=RADIO NAME="CONTROL1" VALUE="1" >Web Administrator
<INPUT tabindex = 2 TYPE=RADIO NAME="CONTROL1" VALUE="2" >Web Developer
<P>Experience
<SELECT tabindex = 3 NAME="CONTROL2">
<OPTION>None</OPTION>
<OPTION>1 Year</OPTION>
<OPTION>3 Years</OPTION>
<OPTION>5 Years</OPTION>
</SELECT>
<BR>
<P>Comments
<BR>
<TEXTAREA accesskey = "C" tabindex = 4 NAME="CONTROL3" COLS="30" ROWS="5">Type your comments here.</TEXTAREA>
<BR>
<P>
<INPUT accesskey = "A" tabindex = 5 NAME="CONTROL4" TYPE=CHECKBOX CHECKED>Send acknowledgement
<BR>
<P>
<INPUT accesskey = "O" tabindex = 6 TYPE="SUBMIT" VALUE="OK">
<INPUT accesskey = "R" TYPE="RESET" VALUE="RESET">
</FORM>
</BODY>
</HTML>
Kết quả ví dụ 2 như hình 2
Hình 2: Kết quả ví dụ 2
Sử dụng khung
Kiểm tra việc sử dụng khung từ ví dụ 7 đến ví dụ 13 trong chương 7. So sánh kết quả ở trình duyệt IE và Netscape. Chú ý sự khác nhau ở mỗi trình duyệt.Sử dụng khung trên dòng
Kiểm tra ví dụ 14 trong chương 7.- Viết đoạn mã HTML minh họa cách sử dụng frameset lồng nhau bằng cách chia thành hai khung theo chiều dọc, chia khung thứ hai theo chiều ngang
Gợi ý: Sử dụng phần tử Frameset trong Frameset
- Viết một tài liệu HTML để tạo một biểu mẫu như hình 3
Gợi ý: Sử dụng phần tử TABLE, tạo bảng, để hiển thị
Education Level và Candidate is a Good Fit for the Position
- Viết đoạn mã HTML để tạo một trang web có chứa hai khung phân chia theo chiều dọc. Khung thứ nhất chứa một ảnh và khung thứ hai chứa một liên kết đến biểu mẫu. Khi kích vào liên kết thì biểu mẫu như hình 8.3 được hiển thị
- Tạo một biểu mẫu đển nhập thông tin họ và tên từ người dùng. Ngoài ra, hiển thị một danh sách ngày, tháng và năm, để người dùng chọn ngày sinh nhật của mình từ danh sách này.
