3 表单详解
html表单 为什么： 提交数据给后台 <form> <input> 元素是最重要的表单元素，每个<input>元素必须写一个 name 属性，不然不会被提交 组合表单元素<fieldset> <form action="action_page.php" method="GET> <fieldset>//组合表单的输入元素 <legend>Personal information:</legend>//组合后的名字 <input type="text" name="firstname">//输入input元素必须设置一个 name 属性，不写name的input元素不会被提交 <input type="radio" name="sex" value="male" checked>Male <input type="submit" value="Submit"> </fieldset> </form>
<fieldset>
fieldset：意思是字段集合
legend：意思是分组后的名字
<fieldset></fieldset>元素
fieldset元素的目的是把多个表单元素分组一组
html表单元素
元素种类：
<input>输入元素
<textarea> 多行文本输入元素
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<datalist> 预定义选项列表
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
</datalist>
</form>
<select> 下拉列表
<option> 待选择元素
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
</select>
<datalist>和<select>的区别
datalist的优点：
1、用户可以自己填写，也可以选择
2、支持模糊匹配
select的优点：
1、只能选择，不能填写
输入元素<input>的类型
<form>
<input type="text" name="firstname">
<input type="password" name="psw">
<input type="submit" value="Submit">
<input type="radio" name="sex" value="male" checked>Male
<input type="checkbox" name="vehicle" value="Bike">I have a bik
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<input type="number" name="quantity" min="1" max="5">
<input type="date" name="bday">
<input type="color" name="favcolor">
<input type="range" name="points" min="0" max="10">
<input type="month" name="bdaymonth">
<input type="week" name="week_year">
<input type="time" name="usr_time">
<input type="datetime" name="bdaytime">
<input type="datetime-local" name="bdaytime">
<input type="email" name="email">
<input type="search" name="googlesearch">
<input type="tel" name="usrtel">
<input type="url" name="homepage">
</form>
<input>属性,输入属性
属性
value
value 属性规定元素的初始值
<input type="text" name="firstname" value="John">
readonly
readonly 属性规定元素为只读（不能修改）
<input type="text" name="firstname" value="John" readonly>
disabled
disabled 属性规定元素是禁用的
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交
<input type="text" name="firstname" value="John" disabled>
size
size 就是框的长度，可以输入无数了字符，如果size="5",表示可以看见5个字符
<input type="text" name="firstname" value="John" size="40">
maxlength
maxlength 最大能输入的字符数
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
<input type="text" name="firstname" maxlength="10">
autocomplete
autocomplete 输入时能自动关联出用户之前提交过的值
<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
novalidate
novalidate：在提交表单时不对表单数据进行验证，novalidate特性是form元素的特性
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
autofocus
autofocus 加载页面时自动获得焦点
First name:<input type="text" name="fname" autofocus>
form
form 属性规定元素属于一个或多个表单
如需引用一个以上的表单，请使用“ ”空格分隔的表单 id 列表
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
formaction
formaction 属性规定向哪个 URL提交表单，会覆盖action属性
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp" value="Submit as admin">
</form>
formenctype
formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）
formenctype 属性覆盖 <form> 元素的 enctype 属性
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
formmethod
formmethod 属性定义get方式还是post方式提交给action。
formmethod 属性覆盖 <form> 元素的 method 属性。
<form action="action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>
formnovalidate
formnovalidate属性规定在提交表单时不对 <input> 元素进行验证
formnovalidate 属性覆盖 <form> 元素的 novalidate 属性
<form action="action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
formtarget
formtarget 属性规定何处显示接收到的响应
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
height 和 width
height 和 width 属性规定 <input> 元素的高度和宽度，仅对图片有效
把图像定义为提交按钮
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
list
list 属性引用的 <datalist> 元素id或name
设置预定义值
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
min 和 max
min 和 max 属性规定 <input> 元素的最小值和最大值
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
multiple
multiple属性规定允许用户在 <input> 元素中输入一个以上的值
<input type="file" name="img" multiple>
pattern （模式）
pattern属性用于检查元素中输入的值符合正则
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
placeholder
placeholder 属性元素的输入提示。
该提示会在用户输入值之前显示在输入字段中
<input type="text" name="fname" placeholder="First name">
required
required 属性规则该元素为必填项
<input type="text" name="usrname" required>
step
step 属性规定元素的合法数字间隔
<input type="number" name="points" step="3">
<input>元素的常用的输入限制
disabled 元素应该被禁用。
max 元素输入的最大值。
min 元素输入的最小值。
maxlength 元素输入的最大字符数。
pattern 规定通过其检查输入值的正则表达式。
readonly 该元素为只读（无法修改）。
required 该元素是必需的（必需填写）。
size 该元素的宽度（以字符计）。
step 该元素的合法数字间隔。
value 该元素的默认值。
浙公网安备 33010602011771号