-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (84 loc) · 10.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="Header">
<h1>Workshop #HTML - FORM</h1>
</div>
<img title="dog" class="dog" src="data:image/jpeg;base64,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" />
<form>
<br>
<div class = "content">
<table>
<tr>
<td>ชื่อ</td>
<td><input type="text"></td>
</tr>
<tr>
<td>สกุล</td>
<td><input type="text"></td>
</tr>
<tr>
<td>วัน/เดือน/ปีเกิด</td>
<td><input type="date"></td>
</tr>
<tr>
<td>อายุ</td>
<td><input type="number"></td>
</tr>
<tr>
<td>เพศ</td>
<td><input id="radio_male" type="radio" name="sex_radio" />
<label for="radio_male">ชาย</label>
<input id="radio_female" type="radio" name="sex_radio" />
<label for="radio_female">หญิง</label>
</td>
</tr>
<tr>
<td>รูป</td>
<td><input type="file"></td>
</tr>
<tr>
<td>ที่อยู่</td>
<td><textarea placeholder="กรุณากรอกข้อมูล" rows="4" cols="20"></textarea></td>
</tr>
<tr>
<td>สีที่ชอบ</td>
<td><select id="color" name="color">
<option value="not_selected">-</option>
<option value="blue">ฟ้า</option>
<option value="green">เขียว</option>
<option value="yellow">เหลือง</option>
<option value="other">อื่นๆ</option>
</select></td>
</tr>
<tr>
<td>แนวเพลงที่ชอบ</td>
<td><input id="forlife_song" type="radio" name="song_radio" />
<label for="forlife_song">เพื่อชีวิต</label>
<input id="looktung_song" type="radio" name="song_radio" />
<label for="looktung_song">ลูกทุ่ง</label>
<input id="other_song" type="radio" name="song_radio" />
<label for="other_song">อื่นๆ</label>
</td>
</tr>
</table>
<div class="button_checkbox">
<input type="checkbox" id="accept" name="accept">
<label for=accept>ยินยอมให้เก็บข้อมูล</label><br><br>
<input class="reset_button" type="reset"
value="Reset">         
<input class="submit_button" type="submit" value="Submit">
</div>
</form>
</div>
<footer>
<b></b>
</footer>
</body>
</html>