html 表单
1.结构
<form action="http://www.example.com/subscribe.php" method="get">
<p>This is where the form controls will appear.</p>
</form>
2.action=url用于接收表单提供的信息
3.get post
get 短表单（搜索框） 或只从web服务器检索数据的情形。
post 允许用户上传文件，非常长。包含敏感信息（例如密码），向数据库中添加信息或是从数据库删除信息
Notes on GET:
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result
GET is good for non-secure data, like query strings in Google
Notes on POST:
Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked
4.如果没有使用method方法，会默认使用get方式发送。
5.input单行文本框
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" value="please input"/>
</p>
</form>
其中maxlength是允许输入的最大字符数量
value默认值
5.password
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" size="15" maxlength="30" />
</p>
</form>
6.textarea
<form action="http://www.example.com/comments.php">
<p>What did you think of this gig?</p>
<textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>
</form>
使用css控制宽度高度。老版本才使用cols rows控制。
6.单选按钮radio
<form action="http://www.example.com/profile.php">
<p>Please select your favorite genre:
<br />
<input type="radio" name="genre" value="rock" checked="checked" /> Rock
<input type="radio" name="genre" value="pop" /> Pop
<input type="radio" name="genre" value="jazz" /> Jazz
</p>
</form>
如果允许不选择。要使用复选框。单选按钮必须选择一个。
7.复选框
<form action="http://www.example.com/profile.php">
<p>Please select your favorite music service(s):
<br />
<input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes
<input type="checkbox" name="service" value="lastfm" /> Last.fm
<input type="checkbox" name="service" value="spotify" /> Spotify
</p>
</form>
8.下拉列表框
<form action="http://www.example.com/profile.php">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
用selected="selected"指定被选中的值。
9.多选框
<form action="http://www.example.com/profile.php">
<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>
<select name="instruments" size="3" multiple="multiple">
<option value="guitar" selected="selected">Guitar</option>
<option value="drums">Drums</option>
<option value="keyboard" selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
</form>
size用于指定一次显示的列表框数目。
multiple属性用于说明这是一个多选框
使用ctrl键配合鼠标点击实现多选。
10.文件上传域
<form action="http://www.example.com/upload.php" method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
11.提交按钮
<form action="http://www.example.com/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe" value="Subscribe" />
</form>
使用value更改显示的文字。使用css或者图像作为按钮。
12.使用图像作为提交按钮
<form action="http://www.example.org/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.jpg" width="100" height="20" />
</form>
13.按钮和隐藏控件
<form action="http://www.example.com/add.php">
<button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button>
<input type="hidden" name="bookmark" value="lyrics" />
</form>
<button>元素用来让用户更好的控制按钮显示的方式
hidden是隐藏的表单控件。不显示在页面上，允许网页设计人员向表单中添加用户不能看到的值。
13.label
<form action="http://www.example.com/subscribe.php">
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
</form>
使用label 和for指向对应控件的ID。和id属性对应，不和name属性对应
表单聚焦
<label>年龄<input type="text" name="age" /></label>
方法：将input用label包裹。
或：用for 和id配合关联使用
14.组合表单元素，fieldset和legend
<form action="http://www.example.com/subscribe.php">
<fieldset>
<legend>Contact details</legend>
<label>Email:<br /><input type="text" name="email" /></label><br />
<label>Mobile:<br /><input type="text" name="mobile" /></label><br />
<label>Telephone:<br /><input type="text" name="telephone" /></label>
</fieldset>
</form>
legend跟在fieldset后，指明控件的用途。会显示文字Contact details
15.表单验证
<form action="http://www.example.com/login/" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" required="required" /><br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" required="required" />
<input type="submit" value="Submit" />
</form>
使用required表明表单的必填项。
16.日期控件
<form action="http://www.example.com/bookings/" method="post">
<label for="username">Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>
17.电子邮件与url输入控件
<form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" value="Submit" />
</form>
<form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
<input type="url" name="website" />
<input type="submit" value="Submit" />
</form>
18.搜索输入控件
<form action="http://www.example.org/search.php">
Search:<br />
<input type="search" name="search" placeholder="Enter keyword" />
<input type="submit" value="Search" />
</form>
Placeholder是未输入数据时的显示文本。
19.使用百度搜索
<form action="http://www.baidu.com/s">
<input name="wd type="text">
<button>百度搜索</button>
</form>
20.使用京东搜索
<form action="http://www.jd.com/serach" target="_blank">
<input name="keyword" type ="text>
<button>京东搜索</button>
</form>
21.实现表单重置
<button type="reset">重置</button>
<input type="reset" value="点我重置">
22.检测账户是否被注册
<button type="button">检测账户是否被注册</button>
配合js使用，暂不实现。
23.input 加disabled 不能更改 可以使用在文本，复选单选等。
24.The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
25.The
<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
</body>
</html>
26.Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
27.Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<h2>Show a Color Picker</h2>
<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>
<form action="/action_page.php">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<input type="submit" value="Submit">
</form>
<p><b>Note:</b> type="color" is not supported in Internet Explorer 11.</p>
</body>
</html>
28.Input Type Date
The is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>
<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11.</p>
</body>
</html>
You can also use the min and max attributes to add restrictions to dates:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
29.Input Type Datetime-local
The specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>
<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>
<form action="/action_page.php">
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="datetime-local" is not supported in Internet Explorer 11.</p>
</body>
</html>
30.Input Type Image
The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.
Display an Image as the Submit button
<form action="/action_page.php">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>
</body>
</html>
31.Input Type File
The defines a file-select field and a "Browse" button for file uploads.
<!DOCTYPE html>
<html>
<body>
<h1>File upload</h1>
<p>Show a file-select field which allows a file to be chosen for upload:</p>
<form action="/action_page.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
32.Input Type Month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>
<form action="/action_page.php">
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11.</p>
</body>
</html>
33.Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<p>The <strong>input type="number"</strong> defines a numeric input field.</p>
<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>
<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="submit" value="Submit">
</form>
</body>
</html>
34.Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<h1>Display a Week Input Control</h1>
<p>The <strong>input type="week"</strong> allows the user to select a week and year.</p>
<p>If the browser supports it, a date picker pops up when entering the input field.</p>
<form action="/action_page.php">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> type="week" is not supported in Firefox, Safari or Internet Explorer 11.</p>
</body>
</html>
35.he readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
36.The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example
<!DOCTYPE html>
<html>
<body>
<h1>The input disabled attribute</h1>
<p>The disabled attribute specifies that an input field should be disabled (unusable and un-clickable):</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
37.The size Attribute
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel, url, email, and password.
<!DOCTYPE html>
<html>
<body>
<h1>The input size attribute</h1>
<p>The size attribute specifies the width (in characters) of an input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input field.
Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.
<!DOCTYPE html>
<html>
<body>
<h1>The input maxlength attribute</h1>
<p>The maxlength attribute specifies the maximum number of characters allowed in an input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
38.The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.
The multiple attribute works with the following input types: email, and file.
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
39.The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
<!DOCTYPE html>
<html>
<body>
<h1>The input pattern attribute</h1>
<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
40.The placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, number, tel, email, and password.
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
41.The required Attribute
The input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
<!DOCTYPE html>
<html>
<body>
<h1>The input required attribute</h1>
<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
42.The step Attribute
The input step attribute specifies the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min attributes to create a range of legal values.
The step attribute works with the following input types: number, range, date, datetime-local, month, time and week
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
43.The autofocus Attribute
The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
44.The autocomplete Attribute
The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with
浙公网安备 33010602011771号