表單

時間 2019-11-08

標籤表單欄目 HTML 简体版

原文原文鏈接


名詞：

action：每一個<form>元素都須要一個action特性，其特性值是服務器上一個頁面的URL，這個頁面用來在用戶提交表單時接收表單中的信息 php

method：表單的提交方式能夠採起如下兩種方式 get和post css

ID：對元素進行惟一標示，用於定位。html

<input>：這個元素用來建立多種不一樣的表單控件，其type特性的值決定了他將要建立那種控件。 瀏覽器

size：size特性不能在新表單中使用，它只在舊的表單中同來指定文本框的寬度（根據可見的字符數量來衡量） 服務器

name：當用戶向表單輸入信息時，服務器須要知道每條數據被輸入到了那個表單控件。每一個表單控件都須要一個name特性，這個特性的值對錶單控件進行標識並與輸入的信息一同傳送到服務器。app

maxlength：用來限制文本輸入區域的字符數量。post

type=「password」：創建一個字符被掩蓋的文本框。網站

type=「radio」：單選按鈕只讓用戶在一系列選項中選擇其中一個。ui

type=「file」這個類型的input會建立一個後面附有Browse按鈕的相似文本框的控件。點擊會打開一個新窗口來讓用戶在計算機上選擇一個文件上傳到網站。this

type=「submit」提交按鈕用來將表單發送到服務器。

type=「image」用圖片做爲提交按鈕

type=「hidden」一個隱藏控件。不會顯示出來，但能用瀏覽器檢查功能查看。

type=「date」建立一個日期輸入控件

type=「email」若是須要用戶提供電子郵件地址，你可使用電子郵件輸入控件。支持HTML5驗證機制的瀏覽器將檢查用戶提供的信息是否是一個格式正確的電子郵件地址。

type「url」同type=「email」。

type=「email」

type=「search」創建搜索單行文本框

value;value特性爲選項指定了被選中時發送到服務器的值。同一組中的每一個按鈕的值應該各不相同（這樣服務器才知道用戶選擇了哪一個選項）

checked：checked特性可用來指定當頁面加載時哪一個值（若是有的話）會被選中。這個特性的值爲checked，同一組中的單選按鈕只能有一個使用此特性。

multiple：能夠經過添加multiple特性（將該特性的值設置爲multiple）來容許用戶從這一列表中選擇多個選項。

<button>可讓用戶更好的控制按鈕的顯示方式，並容許其餘元素出如今<button>元素內。意味着能夠在起始標籤和結束標籤之間結合使用文本和圖像。

for：用來聲明標籤控件標註的是哪一個表單控件

<fieldset>可將相關的表單控件置於<fieldset>元素中分紅一組。大多數瀏覽器會顯示一條邊緣線，只能經過css調整和修改。

<legend>直接跟在起始標籤<fieldset>的後面而且包含一個標題，這個標題用來幫助用戶理解控件組的用途。

placeholder：在文本框輸入文字以前顯示的就是placeholder特性的值

<!DOCTYPE html>  
2.<html lang="en">  
3.<head>  
4.    <meta charset="UTF-8">  
5.    <title>表單1</title>  
6.</head>  
7.<body>  
8.<h1>表單結構</h1>  
9.<form action="http://www.example.com/subscribe.php" method="get">  
10.    <p>This is shere the form controls will appear</p>  
11.</form>  
12.<hr>  
13.<h1>單行文本框</h1>  
14.<form action="http://www.example.com/login.php">  
15.    <p>Username  
16.        <input type="text" name="username" size="15" maxlenth"30"/>  
17.    </p>  
18.</form>  
19.<hr>  
20.<h1>密碼框</h1>  
21.<form>  
22.    <p>Username:  
23.        <input type="text" name="username" size="15" maxlength="30">  
24.    </p>  
25.    <p>Password:  
26.        <input type="password" name="password" size="15" maxlength="30">  
27.    </p>  
28.</form>  
29.<hr>  
30.<h1>文本域（多行文本框）</h1>  
31.<form action="http://www.example.com/comments.php">  
32.    <p>What did you think of this gig?</p>  
33.    <textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>  
34.</form>  
35.<hr>  
36.<h1>單選按鈕</h1>  
37.<form action="http://www.example.com/profile.php">  
38.    <p>Please select your favorite ganre:  
39.        <br/>  
40.        <input type="radio" name="genre" value="rock" checked="checked"/>Rock  
41.        <input type="radio" "radio" name="genre" value="pop"/>POP  
42.        <input type="radio" name="genre" value="jazz"/>Jazz  
43.    </p>  
44.</form>  
45.<hr>  
46.<h1>複選框</h1>  
47.<form action="http://www.example.com/profile.php">  
48.    <p>Plese select your favorite service(s):  
49.        <br/>  
50.        <input type="checkbox" name="service" value checked="checked"/>iTunes  
51.        <input type="checkbox" name="service" value="lastfm"/>Last.fm  
52.        <input type="checkbox" name="service" value="spotify"/>Spotify  
53.    </p>  
54.</form>  
55.<hr>  
56.<h1>下拉列表框</h1>  
57.<form action="http://www.example.com/profile.php">  
58.    <p>What device do you listen to music on?</p>  
59.    <select name="devices">  
60.        <option value="ipod">ipod</option>  
61.        <option value="radio">Radio</option>  
62.        <option value="coputer">Computer</option>  
63.</form>  
64.  
65.</body>  
66.<h1>多選框</h1>  
67.<form action="http://www.example.com/profile.php">  
68.    <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>  
69.    <select name="instruments" size="3" multiple="multiple">  
70.        <option value="guitar" selected="selected">Guitar</option>  
71.        <option value="drums">Drums</option>  
72.        <option value="keyboard" selected="selected">Keyboard</option>  
73.        <option value="bass">Bass</option>  
74.    </select>  
75.</form>  
76.<hr>  
77.<h1>文件上傳域</h1>  
78.<form action="http://www.example.com/upload.php" method="post">  
79.    <p>Upload your song in MP3 format:</p>  
80.    <input type="file" name="user-song" /><br />  
81.    <input type="submit" value="Upload" />  
82.</form>  
83.<hr>  
84.<h1></h1>  
85.<h1>提交按鈕</h1>  
86.<form action="http://www.example.com/subscribe.php">  
87.    <p>Subscribe to our email list:</p>  
88.    <input type="text" name="email" />  
89.    <input type="submit" name="subscribe" value="Subscribe" />  
90.</form>  
91.<hr>  
92.<h1>圖像按鈕</h1>  
93.<form action="http://www.example.org/subscribe.php">  
94.    <p>Subscribe to our email list:</p>  
95.    <input type="text" name="email" />  
96.    <input type="image" src="images/subscribe.jpg" width="100" height="20" />  
97.</form>  
98.<hr>  
99.<h1>按鈕和隱藏控件</h1>  
100.<form action="http://www.example.com/add.php">  
101.    <button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button>  
102.    <input type="hidden" name="bookmark" value="lyrics" />  
103.</form>  
104.<hr>  
105.<h1>標籤表單控件</h1>  
106.<form action="http://www.example.com/subscribe.php">  
107.    <label>Age: <input type="text" name="age" /></label>  
108.    <br/ >  
109.    Gender:  
110.    <input id="female" type="radio" name="gender" value="f">  
111.    <label for="female">Female</label>  
112.    <input id="male" type="radio" name="gender" value="m">  
113.    <label for="male">Male</label>  
114.</form>  
115.<hr>  
116.<h1>組合表單元素</h1>  
117.<form action="http://www.example.com/subscribe.php">  
118.    <fieldset>  
119.        <legend>Contact details</legend>  
120.        <label>Email:<br><input type="text" name="email"></label><br>  
121.        <label>Mobile:<br><input type="text" name="mobile"></label><br>  
122.        <label>Telephone:<br><input type="text" name="telephone"></label>  
123.    </fieldset>  
124.</form>  
125.<hr>  
126.<h1>HTML5:表單驗證</h1>  
127.<form action="http://www.example.com/login/" method="post">  
128.    <label for="username">Username:</label>  
129.    <input type="text" name="username" id="username" required="required" /><br />  
130.    <label for="password">Password:</label>  
131.    <input type="password" name="password" id="password" required="required" />  
132.    <input type="submit" value="Submit" />  
133.</form>  
134.<hr>  
135.<h1>HTML5:日期</h1>  
136.<form action="http://www.example.com/bookings/" method="post">  
137.    <label for="username">Departure date:</label>  
138.    <input type="date" name="depart" />  
139.    <input type="submit" value="Submit" />  
140.</form>  
141.<hr>  
142.<h1>HTML5:電子郵箱和URL輸入控件</h1>  
143.<form action="http://www.example.org/subscribe.php">  
144.    <p>Please enter your email address:</p>  
145.    <input type="email" name="email" />  
146.    <input type="submit" value="Submit" />  
147.</form>  
148.<hr>  
149.<h1>HTML5:搜索輸入控件</h1>  
150.</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。