制作表单网页
表单语法
<form method="post" action="result.html">
/*
method="post"
规定任何发送表单数据常用值：get |post
在实际网页中开发通常采用post方式提交表单数据
action="result.html"
表示向何处发生表单数据
*/
<p>昵称：<input name="name" type="text"></p>
<p>密码：<input name="pass" type="password"></p>
<p>
<input type="submit" name="Button" value="提交" />
<input type="reset" name="Reset" value="填" />
</p>
</form>
表单属性
用于指定表单是否有自动完成功能，取值on/off
-
novalidates属性 指定在提交表单时取消对表单进行的检查
表单元素格式
语法：
<input type="text" name="uname" value="tetx"/>
/*
type="text"
input 原属类型
name="uname"
input原属名称
value="text"
input原属值
*/
| 属性 | 说明 |
|---|
| type | 指定元素的类型，text、password、checkbox、radio、submit、reset、file、hidden、image、 button、email、url等，默认为text。 | | name | 指定表单元素的名称 | | value | 元素的初始值，type为radio时必须指定一个值 | | size | 指定表单元素的初始宽度，当type为text或password时，表单元属的大小字符为单位，对于其他类型，宽度以像素为单位 | | maxlength | type为text或password时输入的最大字符数 | | checked | type为radio或checkbox时，指定按钮是否时被选择 |
文本框
-
单行文本输入框<input =type=“text”’/> 单行文本输入框常用于输入简短的信息，如用户名，账号，身份证号码等，常用的属性有name、value、maxlength 语法： <input type="text" name="userName" value="用户名" size="30"maxlength="20"/>
/*
type="text"
文本框
name="userName"
文本框名称
value="用户名"
文本框初始值
size="30"
文本框长度
maxlength="20"
文本框输入的最多字符
*/
密码框
密码输入框<input type=“password”/’>
密码输入框用来输入密码，其内容将以原点的形式显示
语法：
<input type="password" name="pass" size="20"/>
/*
type="password"
密码框
name="pass"
密码框名称
size="20"
密码框的长度
*/
单选按钮
-
单选按钮<input type=“radio”/’>
- 单选按钮用于单项选择 在定义单选按钮时，必须用同一组的选项指相同的name值，这样”单选“才会生效
语法： <input name="gender" type="radio" value="男" checked/>男
<input name="gender" type="radio" value="女"/>女
/*
name="gender"
name相同声明属于同一组
type="radio"
单选按钮
value="男"
值
checked
单选按钮选中状态
*/
复选框 复选框<input type=“checkbox”/’> 复选框常用于多项选择，如选择兴趣 爱好等 可对其他checked属性，指定默认选项中项。
语法：
<input type="checkbox" name="interst" value="sports"/>运动
<input type="checkbox" name="interst" value="program" checked/>编程
<input type ="checkbox" name="intrst" value="play" />玩游戏
按钮
-
普通按钮<input type=“button”’/>
- 普通按钮常常配合javaScript 脚本语言使用
-
提交按钮<input type=“submit”’>
- 提交按钮是表单中的核心控件，用户完成信息输入后，一般都需要单击提交按钮才能完成表单数据的提交
-
重置按钮<input type=“reset”’/>
- 单用户输入的信息有误时，可单击重置按钮取消已输入的表单信息
-
图像 形式的提交按钮<input type=“image”’/>
- 图像形式按钮的提交按钮用图像替代了默认的按钮，外观更加完美，定义src属性指定图像的url地址
语法：
<input type="reset" name="butReset" value="重置"/>
<input type="image" src="./inage/anniu.png" width="30px" height="30px"/>
<input type="button" name="butButton" value="button"/>
文件域
-
文件域<input type=“file”/’>
- 单定义文件域时页面中将出现一个文件框和一个“浏览。。。按钮，用户以通过填充文件路径或直接选择文件的方式，将文件的方式，将文件提交给后台服务器
语法
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files"/>
<input type ="submit" name=upload value="上次传"/>
</p>
</form>
电子邮件输入框
- email类型<input type=“email”/’>
- 专门用于输入E-mail地址的文本输入框，用来验证email输入的内容
- 是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息
语法
<p>
邮箱：<input type="email" name="email"/>
</p>
<input type="submit"/>
网址输入框
- url类型<input type=“url”/’>
- 用于输入URL地址的文本框 ，如果所输入的内容是url地址的文本，则会提交数据到服务器；如果输入的不符合url地址，则不允许提交 并且有提示信息。
语法
<p>
输入网址：
<input type="url" name="userUrl" />
</p>
<input type ="submit"/>
数值输入框
- number类型<input type=“number”/’’>
- 用于提供输入数值的文本框，在提交表单时，会自动检测该输入框中的内容是否为数字，如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。
语法：
<p>
数字输入：<input type="number" name="num" min="0" max="100" atep="10"/>
</p>
<input type=submit/>
/*
type="number"
数字
min="0"
最小值
max="100"
允许最大值
step="10"
合法的数字间隔，默认值为1
*/
滑块
- range类型<input type=“range”/’>’
- 用于提供一定范围内数值输入范围，在网页中显示为滑动条，提供min属性和max属性，可以设置最大小值与最大值，提过step属性指定每一次滑动的步幅。
语法
<p>
请输入数字：<input type="range" name="num" min="0" max="100" step="10"/>
</p>
搜索输入框
- search类型<input type=“search”/’>’
- 用于输入搜索关键的文本框，它能自动记录一些字符，列如站点搜索或者Google搜索，在用户输入内容后，其右侧会附带一个删除图标，单击这个图标可以快速清理内容。
语法
<p>
关键词：<input type="search" name="sousuo"/>
</p>
<input type="submit"/>
总结
表单
表单主要用来制作动态网页，方便和用户进行交互
常用的表单元素
文本框<text">
密码框 password
单选框radio
复选框checkbox
按钮button,submit,reset
文件file
邮箱email
网址url
数字number
滑块range
搜索search
|