LAB Form
1. Tạo trang html mới, lưu với tên form1.html
2. Vào menu Insert èForm èForm (hoặc Insert bar è tab Form è Form)
3. Nhắp chuột trong vùng form , chèn table 2 cột, 10 hàng, cellpadd=4, border=1, width=500, cellspace=0, caption= ĐĂNG KÝ THẢNH VIÊN CLB YÊU NHẠC
4. Nhắp ở cột trái rồi gõ vào các nhãn :
5. Nhắp ô phía sau Họ tên, chèn textfield ID=hoten
6. Nhắp ô phía sau Tên đang nhập, chèn textfield ID=username
7. Nhắp ô phía sau Mật khẩu, chèn textfield ID=pass, Type=Password
8. Nhắp ô phía sau Gõ lại mật khẩu, chèn textfield ID=repass, Type=Password
9. Nhắp ô phía sau Phái, chèn radio group tên=phai, 2 mục Nam =0, Nữ=1
10. Nhắp ô phía sau Ngoại ngữ, chèn 3 checkbox ID=Anh, Label=Anh, ID=phap, Label=Pháp, ID=hoa, Label=Hoa
11. Nhắp ô phía sau Nghề nghiệp, chèn List/Menu ID=nghenghiep, thêm 4 mục:
Label= Bạn làm nghề gì, Value=0
Label= Học sinh - Sinh viên, Value=1
Label= Giáo viên, Value=2
Label= Nhân viên, Value=3
12. Nhắp ô phía sau Hình, chèn File Field, ID=hinh
13. Nhắp ô phía sau Sở thích, chèn Text Area ID=sothich. Nhắp ô Sở thích, chỉnh Vert=top
14. Chọn 2 ô của hàng cuối Merge lại, chỉnh Horz=Center
15. Nhắp ô cuối, chèn buton ID=dangky, Value= Đăng ký
16. Nhắp sau nút dangky, chèn buton ID=xoa, Value= Làm lại, Action=Reset
17. Nhắp sau nút xoa, chèn hidden field Tên là NgayDangKy, Value= 30/4/2009
18. Tạo class tên
.dangky{color: #99FF33; background-color: #006699;
border: 1px solid #996633; width: 300px; }
Xong thì set class cho hoten, username, pass, repass, nghenghiep, hinh, sothich
19. Tạo style
#form1 table {border: 5px groove #993366; background-color: #FFCCCC;color: #003399; }
20. Tạo style
#form1 table td {border: 1px solid #CC9999;}
21. Chọn tag table trên thanh tag , chỉnh Align=Center
22. F12 xem thử
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="500" border="1">
<caption align="center">DANG KY THANH VIEN CLB YEU NHAC</caption>
<tbody>
<tr>
<td>Ho ten</td>
<td><label for="hoten"></label>
<input type="text" name="hoten" id="hoten"></td>
</tr>
<tr>
<td>Ten dang nhap</td>
<td><label for="username"></label>
<input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>Mat khau</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>Go lai mat khau</td>
<td><label for="repass"></label>
<input type="password" name="repass" id="repass"></td>
</tr>
<tr>
<td>Phai</td>
<td><p>
<label>
<input type="radio" name="phai" value="0" id="phai_0">
Nam</label>
<br>
<label>
<input type="radio" name="phai" value="1" id="phai_1">
Nu</label>
<br>
</p></td>
</tr>
<tr>
<td>Ngon ngu</td>
<td><p>
<label>
<input type="checkbox" name="Ngon ngu" value="A" id="Ngonngu_0">
Anh</label>
<br>
<label>
<input type="checkbox" name="Ngon ngu" value="P" id="Ngonngu_1">
Phap</label>
<br>
<label>
<input type="checkbox" name="Ngon ngu" value="H" id="Ngonngu_2">
Hoa</label>
<br>
</p></td>
</tr>
<tr>
<td>Nghe nghiep</td>
<td><label for="nghenghiep"></label>
<select name="nghenghiep" id="nghenghiep">
<option value="0">Bạn làm nghề gì</option>
<option value="1">Học sinh - Sinh viên</option>
<option value="2">Giáo viên</option>
<option value="3">Nhân viên</option>
</select></td>
</tr>
<tr>
<td>Ho sinh</td>
<td><label for="hinh"></label>
<input type="file" name="hinh" id="hinh"></td>
</tr>
<tr>
<td>So thich</td>
<td valign="top"><textarea name="sothich" id="sothich"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="dangky" id="dangky" value="Dang ky">
<input type="reset" name="xoa" id="xoa" value="Làm lại">
<input type="hidden" name="NgayDangKy" id="NgayDangKy" value="30/4/2009"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Form
0 comments:
Post a Comment