目录
一、表单
语法
<form method="" action="">
...<!-- 各种表单元素 -->
</form>
二、十七个表单元素
1、文本框:
<input type="text" />
2、密码框:
<input type="password" />
3、单选框:
<input type="radio" name="gen" value="男"/>男
<input type="radio" name="gen" value="女"/>女
4、使用场景:多个选项最多只能选择一项
备注:
1、多个选项只选其中一项时,每个单选框的name值必须一致
2、必须要有value值
3、若某个选项为默认选中时,需要给该项添加checked属性:
<input type="radio" name="gen" value="男" checked/>男
5、复选框:
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
6、使用场景:多个选项可以选择多个
备注:
1、多个选项可以多选时,每个单选框的name值必须一致
2、必须要有value值
3、若某个选项为默认选中时,需要给该项添加checked属性:
<input type="checkbox" name="hobby" value="羽毛球" checked />羽毛球
7、文件域:
<input type="file" />
8、邮件框:
<input type="email" />
备注:若输入内容,当提交表单时,会自动校验内容是否符合邮箱格式
9、地址框:
<input type="url" />
备注:
若输入内容,当提交表单时,会自动校验内容是否符合url地址格式
url地址需要包含http://或https://
10、数字框:
<input type="number" />
备注:
只能输入数字以及表示数字的符号,比如小数点,+ -
11、滑块:
<input type="range" />
使用场景:进度展示、长度展示
12、下拉列表:
<select>
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
...
<option value="选项N">选项N</option>
</select>
使用场景:多个选项组合为一个结果时,使用下拉列表,如:年月日、地址、级联菜单等联合选项
备注:
标签必须要有value属性,中间必须要写文本值,且value值要与文本值一致 若下拉列表中某项默认被选中,需要在该项(option)中添加selected属性:
<select>标签中必须要有作为选项,否则是空下拉列表
<select>
<option value="选项一">选项一</option>
<option value="选项二" selected>选项二</option>
...
<option value="选项N">选项N</option>
</select>
13、日期框:
年月日:
<input type="date" />
年月日时分秒
<input type="datetime-local" />
14、文本域:
<textarea></textarea>
三、按钮
1、普通按钮:
<input type="button" value="提交"/>
备注:必须要有value值,否则按钮无提示
图片按钮:
<input type="image" src=""/>
备注:
图片按钮必须要有src值,否则按钮不显示图片
图片按钮自带提交表单的效果
2、提交按钮:
<input type="submit"/>
备注:
若不写value值,默认显示为“提交”
具有提交表单的效果
3、提交按钮:
<input type="reset"/>
备注:
若不写value值,默认显示为“重置”
点击重置按钮会将表单内容恢复到初识状态
4、搜索框:
<input type="search"/>
5、表单元素的属性:
属性 | 说明 |
---|---|
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text |
size | 指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text 或 password 时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否是被选中 |
min | type为number、range时,表示输入/显示最小值 |
max | type为number、range时,表示输入/显示最大值 |
step | type为number、range时,表示在加减值时的步进量 |
6、标注:lable
增强鼠标的可用性、自动将焦点转移到与该标注相关的表单元素上
<label for="id">标注的文本</label>
<input type="radio" name="gender" value="男" id="male"/>男
表单的高级应用
7、隐藏域:
<input type="hidden" value=""/>
备注:
不会显示在页面上
8、只读:readonly
所有的输入内容以及日期元素可用,若单选框没有默认选项时也可生效
<input name="name" type="text" value="张三" readonly>
9、禁用:disabled
所有表单元素都可生效
<input type="submit " disabled value="保存" >
10、表单的初级验证
提示语:placeholder
<input type="text" placeholder="请输入用户名"/>
备注:
可以描述文本框期待用户输入何种内容 提示语默认显示,当文本框中输入内容时提示语消失
适合于input标签:text、search、url、email和password等输入类型表单元素、textarea标签也可适用
11、必填/必选:required
规定文本框填写内容不能为空,否则不允许用户提交表单
<input type="text" required/>
备注:
当提交表单时,会验证含有required属性的表单元素,检查是否有内容,若无则不能提交
适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型
12、正则表达式:patten
用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单
<input type="text" pattern="^1[35789]\d{9}" /><!-- 要求只能输入手机号 -->
四、代码示例
<!-- 表单元素 -->
<form>
</form>
<!-- method:提交请求的方式;action:表示将数据发送到一个地方; -->
<form method="POST" action="">
<p>名字:<input name="name" type="text" /></p>
<p>密码:<input name="pass" type="password" /></p>
</form>
<form method="POST" action="">
<!-- name名字;type样式;value提示字符;maxlength最大输入长度;size输入框长度;placeholder提示语; -->
<p>名字:<input name="name" type="text" value="" maxlength="" size="" placeholder="请输入"/></p>
<p>密码:<input name="pass" type="password" value="" maxlength="" size="" /></p>
</form>
<!-- 单选框 -->
<p>
<a>性别:</a>
 
<!-- name名字;type样式;value提交服务器内容;checked默认选择; -->
<input name="sex" type="radio" value="男" checked />男
 
<input name="sex" type="radio" value="女" />女
</p>
<!-- 复选框 -->
<p>
<a>性别:</a>
 
<input name="sex" type="checkbox" value="男" />男
 
<input name="sex" type="checkbox" value="女" />女
</p>
<!-- 表签 -->
<p>
<a>性别:</a>
 
<input name="sex" id="man" type="radio" value="男" />
<label for="man">男</label>
 
<input name="sex" id="woman" type="radio" value="女" />
<label for="woman">女</label>
</p>
<!-- 文件域 -->
<form method="POST" enctype="multipart/form-data">
<p>
<input name="" id="" type="file" />
<input name="" id="" type="submit" value="上传" />
</p>
</form>
<!-- 关于按钮 -->
<input type="button" name="" value="普通按钮" />
<input type="reset" name="" value="重置按钮" />
<input type="submit" name="" value="提交按钮" />
<input type="image" src="" value="图片按钮" />
<br />
<!-- 其他的一些typpe -->
<p>
<!-- 邮箱 -->
<input type="email" name="" />
</p>
<p>
<!-- 网址 -->
<input type="url" name="" />
</p>
<p>
<!-- 数字 -->
<input type="number" name="" step="2" min="1" max="1772" value="2" />
</p>
<p>
<!-- 滑块 -->
<input type="range" name="" min="2" max="10" value="6" />
</p>
<p>
<!-- 搜索框 -->
<input type="search" name="search" />
<input type="button" name="search"/>
</p>
<!-- 下拉列表 -->
<p>
<select name="" size="5">
<option value="" selected>990</option>
<option value="">997</option>
</select>
<select name="">
<option value="">990</option>
<option value="" selected>997</option>
</select>
</p>
<!-- 时间 -->
<p>
<input type="date" name="" value=""/>
<input type="datetime" name="" value=""/>
<input type="datetime-local" name="" value=""/>
</p>
<!-- 多行文本域 -->
<p>
<textarea name="" cols="40" rows="5"></textarea>
</p>
<p>
<input type="hidden" value="" name=""/>
</p>
<p>
<input name="" type="text" />
</p>
<p>
<!-- 只读 -->
<input name="" type="text" readonly/>
<!-- 禁用 -->
<input type="text" disabled/>
<!-- 必填 -->
<input type="text" required/>
</p>