基本表单元素
一个基本的表单只需要三个元素,
form
,input
,button
元素。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> form { width: 1000px; height: 500px; margin: 10px auto; border: 1px double red; border-style: double; } div { font: normal 28px/34px "Microsoft Yahei"; text-align: center; margin-top: 100px; } </style> </head> <body> <div>表单</div> <form> <input name="inputdata"> <button>Submit</button> </form> </body> </html>
form
action
action
属性的配置代表要将表单数据 发送到什么地址. 如果
form
元素不设置表单该属性,那么浏览器会将表单数据发送到以加载该HTML文档的URL。 如果
action
设置的是相对属性,那么该值会被嫁接到当前页的URL的后面。如果在当前的HTML网页中配置了base,则嫁接刀该元素的href属性后面。
method
method
代表的是表单数据发送到服务器的HTTP方法。允许的值有POST
和GET
。分别对应HTTP的get请求与post请求。具体需要配置什么参数,需要由服务器给出的接口决定。enctype
enctype
属性指定了浏览器对发送给服务器的数据采用的编码方式。允许的参数如下
值 说明 application/x-www.form-urlencoded 默认编码方式,这种编码方式不能进行文件上传 multipart/form-data 多类型,支持文件和多类型的参数的上传 text/plain 浏览器差异
autoComplete
让浏览器记住用户输入表单的数据,并且在再次遇到类似的表单的时候自动使用这些数据帮用户填写。
<input autocomplete = 'off/on'/>
target
target
用户指定表单反馈信息的目标显示位置。它跟<a>
元素中的target
非常相似。
值 说明 _blank 显示在新窗口 _parent 显示父窗框组件中 _self 默认方式,显示在当前窗口中 _top 显示在最上层串口中 显示在指定的frame中
name
name
属性可以用来为表单设置一个独一无二的标识符,以便使用DOM时,区分各个表单。需要注意的是:name
属性与全局属性id
不是一回事。id
针对的对象是CSS选择器。<input name='name'/>
label
lable
元素存在的意义就是为表单元素提供说明与提示信息。
for
for
属性表示该label
元素是为哪个表单元素提供说明。for
内容应该是表单元素的唯一标识符name
属性的值。<body> <div>表单</div> <form action="http://www.google.com/form" method="POST"> <div class="center"> <label>姓名:<input name="name" placeholder="请输入姓名" /></label> </div> </form> </body>
input
autofocus
autofocus
用于让表单一出现的时候就聚焦于该input
元素。<body> <div>表单</div> <form action="http://www.google.com/form" method="POST"> <div class="center"> <p><label for="name">姓名:<input name="name" placeholder="请输入姓名" autofocus /></label></p> <p><label for="password">密码:<input name="password" placeholder="请输入密码" /></label></p> </div> </form> </body>
disabled
禁用表单元素
<body> <div>表单</div> <form action="http://www.google.com/form" method="POST"> <div class="center"> <p><label for="name">姓名:<input name="name" placeholder="请输入姓名" autofocus /></label></p> <p><label for="password">密码:<input name="password" placeholder="请输入密码" disabled /></label></p> </div> </form> </body>
fieldset
legend
fieldset
元素用于给复杂的表单元素分类。而legend
元素则是给分组做简易的说明。
<body> <div>表单</div> <form action="http://www.google.com/form" method="POST"> <div class="center"> <fieldset> <legend>WIFI设置</legend> <p><label>SSID<input name="wifi_name" placeholder="请输入wifi名称" /></label></p> <p><label>密 码<input name="wifi_password" placeholder="请衰弱wifi密码" /></label></p> <p><input type="button" name="wifi_submit" value="修改"></p> </fieldset> <fieldset> <legend>局域网设置</legend> <p><label> I P 地址<input name="ethernet_ip" placeholder="请输入局域网地址" /></label> </p> <p><label>子网掩码<input name="ethernet_mask" placeholder="请输入局域网掩码" /></label> </p> <p><label>默认网关<input name="ethernet_gateway" placeholder="请输入局域网网关" /></label> </p> <p><label> D N S <input name="ethernet_dns" placeholder="请输入局域网DNS" /></label> </p> <p><input type="button" name="wifi_submit" value="修改"></p> </fieldset> </div> </form> </body>
button
如果将
button
的type
设置为submit
,则在按下该按钮后会提交包含它的表单。并且,这是button
元素的默认行为。下面的属性作为form
元素属性的覆盖或者补充。
type
默认属性为
submit
,决定按钮的功能;
form
指定关联表单;
formaction
指定表单提交的地址;
formenctype
指定表单数据的编码方式。
formmethod
指定表单提交数据到服务器中的HTTP访问方式
formtarget
指定表单数据提交后,返回信息的处理方式。
formovalidate
指定表单是否执行表单数据有效性检查
select
optgroup
<body> <div