Skip to content

Commit 31db968

Browse files
committed
forms
1 parent b6765ae commit 31db968

24 files changed

+202
-0
lines changed

.DS_Store

0 Bytes
Binary file not shown.

7/.DS_Store

8 KB
Binary file not shown.

7/button-and-hidden-controls.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<form action="http://www.example.com/add.php">
2+
<button>
3+
<img src="images/test.jpg" alt="add" width="10" height="10" /> Add
4+
</button>
5+
<input type="hidden" name="bookmark" value="lyrics" />
6+
</form>

7/checkbox.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<form action="http://www.example.com/profile.php">
2+
<p>Please select your favorite music service(s):
3+
<br />
4+
<input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes
5+
<input type="checkbox" name="service" value="lastfm" /> Last.fm
6+
<input type="checkbox" name="service" value="spotify" /> Spotify
7+
</p>
8+
</form>

7/drop-down-list-box.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<form action="http://www.example.com/profile.php">
2+
<p>What device do you listen to music on?</p>
3+
<select name="device">
4+
<option value="ipod">iPod</option>
5+
<option value="radio">Radio</option>
6+
<option value="computer">Computer</option>
7+
</select>
8+
</form>

7/example.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<html>
2+
<head>
3+
<title>Forms</title>
4+
</head>
5+
<body>
6+
<form action="http://www.example.com/review.php" method="get">
7+
<fieldset>
8+
<legend>
9+
Your Details:
10+
</legend>
11+
<label>
12+
Name:
13+
<input type="text" name="name" size="30" maxlength="100" />
14+
</label>
15+
<br />
16+
<label>
17+
Email:
18+
<input type="email" name="email" size="30" maxlength="100" />
19+
</label>
20+
<br />
21+
</fieldset>
22+
<br />
23+
<fieldset>
24+
<legend>
25+
Your Review:
26+
</legend>
27+
<p>
28+
<label for="hear-about">
29+
How did you hear about us?
30+
</label>
31+
<select name="referrer" id="hear-about">
32+
<option value="google">Googel</option>
33+
<option value="friend">Friend</option>
34+
<option value="advert">Advert</option>
35+
<option value="other">Other</option>
36+
</select>
37+
</p>
38+
<p>
39+
Would you visit ageain?
40+
<br />
41+
<label>
42+
<input type="radio" name="rating" value="yes" />
43+
Yes
44+
</label>
45+
<label>
46+
<input type="radio" name="rating" value="no" />
47+
No
48+
</label>
49+
<label>
50+
<input type="radio" name="rating" value="maybe" />
51+
Maybe
52+
</label>
53+
</p>
54+
<p>
55+
<label for="comments">
56+
Comments
57+
</label>
58+
<br />
59+
<textarea rows="4" cols="40" id="comments">
60+
</textarea>
61+
</p>
62+
<label>
63+
<input type="checkbox" name="subscribe" checked="checked" />
64+
Sign me up for email updates
65+
</label>
66+
<br />
67+
<input type="submit" value="Submit review" />
68+
</fieldset>
69+
</form>
70+
</body>
71+
</html>

7/file-input-box.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<form accept="http://www.example.com/upload.php" method="post">
2+
<p>Upload your song in MP3 format:</p>
3+
<input type="file" name="user-song" /><br />
4+
<input type="submit" name="Upload" />
5+
</form>

7/form-structure.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<form action="http://www.example.com/subscribe.php" method="get">
2+
<p>This is where the form controls will appear.</p>
3+
</form>

7/grouping-form-elements.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<fieldset>
2+
<legend>Contact details</legend>
3+
<label>Email:<br />
4+
<input type="text" name="email" />
5+
</label><br />
6+
<label>Mobile:<br />
7+
<input type="text" name="mobile" />
8+
</label><br />
9+
<label>Telephone:<br />
10+
<input type="text" name="telephone" />
11+
</label>
12+
</fieldset>

7/html5-date-input.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<form action="http://www.example.com/bookings/" method="post">
2+
<label for="time">Departure date:</label>
3+
<input type="date" name="depart" id="time" />
4+
<input type="submit" value="Submit">
5+
</form>

7/html5-email-input.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<form action="http://www.example.org/subscribe.php">
2+
<p>Please enter your email address:</p>
3+
<input type="email" name="email" />
4+
<input type="submit" value="Submit" />
5+
</form>

7/html5-form-validation.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<form action="http://www.example.com/login" method="post">
2+
<label for="username">Username:</label>
3+
<input type="text" name="username" required="required" /><br />
4+
<label for="password">Password:</label>
5+
<input type="password" name="password" required="required" />
6+
<input type="submit" value="Submit">
7+
</form>

7/html5-placeholder.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<form action="http://www.example.org/search.php">
2+
<label>
3+
<p>Search:</p>
4+
<input type="search" name="search" placeholder="Enter keyword" />
5+
</label>
6+
<input type="submit" value="Search" />
7+
</form>

7/html5-search-input.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<form action="http://www.example.org/search.php">
2+
<label>
3+
<p>Search:</p>
4+
<input type="search" name="search" />
5+
</label>
6+
<input type="submit" value="Search" />
7+
</form>

7/html5-url-input.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<form action="http://www.example.org/profile.php">
2+
<p>Please enter your website address:</p>
3+
<input type="url" name="website" />
4+
<input type="submit" value="Submit" />
5+
</form>

7/image-button.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<form action="http://www.example.org/subscribe.php">
2+
<p>Subscribe to our email list:</p>
3+
<input type="text" name="email" />
4+
<input type="image" src="images/test.jpg" width="100" height="20" />
5+
<!-- 没有网络,先随便用个文件测试一下。 -->
6+
</form>

7/images/test.jpg

36.6 KB
Loading

7/labelling-form-controls.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<label>Age: <input type="text" name="age" /></label>
2+
<br />
3+
Gender:
4+
<input id="female" type="radio" name="gender" value="f" />
5+
<label for="female">Female</label>
6+
<input id="male" type="radio" name="gender" value="m" />
7+
<label for="male">Male</label>

7/multiple-select-box.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<form action="http://www.example.com/profile.php">
2+
<p>Do you play any of the following instruments?(You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)</p>
3+
<select name="instruments" size="3" multiple="multiple">
4+
<option value="guitar" selected="selected">Guitar</option>
5+
<option value="durms">Drums</option>
6+
<option value="keyboard" selected="selected">Keyboard</option>
7+
<option value="bass">Bass</option>
8+
</select>
9+
</form>

7/password-input.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<form action="http://www.example.com/login.php">
2+
<p>Username:
3+
<input type="text" name="username" size="15" maxlength="30" />
4+
</p>
5+
<p>Password:
6+
<input type="Password" name="password" size="15" maxlength="30" />
7+
</p>
8+
</form>

7/radio-button.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<form action="http://www.example.com/profile.php">
2+
<p>Please select your favorite genre:
3+
<br />
4+
<input type="radio" name="genre" value="rock" checked="checked" /> Rock
5+
<input type="radio" name="genre" value="pop" /> Pop
6+
<input type="radio" name="genre" value="jazz" /> Jazz
7+
</p>
8+
9+
</form>

7/submit-button.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<form action="http://www.example.com/subscribe.php">
2+
<p>Subscribe to our email list:</p>
3+
<input type="text" name="email" />
4+
<input type="submit" name="subscribe" value="Subscribe" />
5+
</form>

7/text-input.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<form action="http://www.example.com/login.php">
2+
<p>Username:
3+
<input type="text" name="username" size="15" maxlength="30" />
4+
</p>
5+
</form>

7/textarea.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<form action="http://www.example.com/comment.php">
2+
<p>What did you think of this gig?</p>
3+
<textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>
4+
</form>

0 commit comments

Comments
 (0)