表单简介
表单标签对‘<form>
’是一个“块级元素”。表单标签的内容通常是“表单元素”+“提交按钮”的形式。它虽然和‘<div>
’标签一样属于“块级元素”,但它却有自己的实际用处,也就是若不将“表单元素”放置于表单标签‘<form>
’中,那某些表单元素将会失效,如:“提交”按钮和“重置”按钮。
表单属性
name:规定表单的名称
action:规定当提交表单时向何处发送表单数据,它的属性值应该是一个“URL”
method:规定用于发送 form-data 的 HTTP 方法,值为:get/post
target:规定在何处打开“action”中设定的URL。有以下值(_blank、_self、_parent、_top、frame的name)
enctype:规定在发送到服务器之前应该如何对表单数据进行编码,有以下值:
- application/x-www-form-urlencoded(默认,在发送前编码所有字符);
- multipart/form-data(不对字符编码,在使用包含文件上传控件的表单时,必须使用该值;
- text/plain(空格转换为 “+” 加号,但不对特殊字符编码);
autocomplete:规定是否启用表单的自动完成功能,有以下值:on/off
novalidate:如果使用该属性,则提交表单时不进行html5自带的验证。
‘label’标签
表单中用于显示表单字段的标签,可以让用户知道该行表单元素的作用,它属于“行级元素”。和‘<span>
’标签不一样,它配合后面学习的其它表单元素可以实现一些作用上的关联。所以,标准的表单编写都需要在表单元素前加上一对‘<label>
’标签,内容需写上标签后表单元素的作用。
<form>
<label>账号:</label><br>
<label>密码:</label><br>
</form>
呈现效果如下:
‘textarea’标签
‘<textarea>
’标签是一个可以输入多行文本的标签对,它同样是一个“行内块级标签”。
textarea 标签常用属性
cols:设置行数
rows:设置列数
placeholder:设置占位符
代码示例
<form>
<textarea rows="5" cols="30" placeholder="请输入您的个性签名"></textarea>
</form>
呈现效果:
‘select’标签
通过‘<select>
’标签可以创建单选和多选的下拉菜单。可以通过“size”属性设置该标签在一个选项菜单中可见的选项个数,当它的值设为“1”时,将显示为默认的‘<select>
’下拉菜单的样式,‘<option>
’是它必须的子菜单,否则将不能提供任何可选项,而‘<option>
’标签通常需要具有一个“value”属性,以便于在做数据操作时能准确地通过该属性值取到对应标签的内容。
‘select’标签常用属性
autofocus: 规定在页面加载后文本区域自动获得焦点。
disabled:规定禁用该下拉列表。
multiple:规定可以选择多个选项。
name:规定下拉列表的名称。
required:规定文本域是必填的。
代码示例
<form>
<label>请选择您喜欢的城市:</label>
<select required="required" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">杭州</option>
<option value="4">成都</option>
</select>
</form>
‘selected’属性
如果想要默认选中某一项,则为‘option’标签添加‘selected’属性即可。
‘select’分组
分组下拉菜单,将‘optgroup’标签嵌套在‘select’标签中,并为其指定‘label’属性设置组标题,再将‘option’标签嵌套在‘optgroup’标签中即可,如下所示:
<form>
<label>中午吃什么呢:</label>
<select>
<optgroup label="西餐">
<option value="1">牛排</option>
<option value="2">披萨</option>
</optgroup>
<optgroup label="中餐">
<option value="3">麻婆豆腐</option>
<option value="4">青椒肉丝</option>
<option value="5">蚂蚁上树</option>
</optgroup>
<optgroup label="快餐">
<option value="6">阿米巴巴</option>
<option value="7">大米先生</option>
<option value="8">顺旺基</option>
</optgroup>
</select>
</form>
提示:size 属性可以指定显示的列表个数,当显示个数小于实际菜单项时以滚动显示呈现;
‘dataList’标签
‘<datalist>
’需要配合一个属性为“list”的‘<input>
’标签使用,通过将list的属性值设置为‘<datalist>
’标签的“ID”属性的值来实现关联,实现出一个既可输入,又可选择的下拉菜单。当然,IE浏览器不支持该元素。
代码示例:
<form>
<input type="text" list="citys" placeholder="请输入或选择您喜欢的城市" size="30">
<datalist id="citys">
<option value="北京"></option>
<option value="上海"></option>
<option value="成都"></option>
<option value="杭州"></option>
<option value="三亚"></option>
</datalist>
</form>
‘button’标签
‘button’标签对和其它表单元素一样,同是属于“行内块元素”。
‘button’标签常用属性
- type:指定按钮类型,其值包括:button(普通按钮)/submit(提交按钮)/reset(重置按钮)
代码示例
<form>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</form>
效果呈现
‘output’ 标签
‘for’ 属性关联‘input’的‘id’属性值,如果有多个则以空格隔开;
为‘form’标签添加‘oninput’属性,根据公式拼接出输出内容;
如果需要转换为数字,则使用‘parseInt()’进行转换;
代码示例:
<form oninput="result.value = parseInt(rangeVal.value)">
<label>0</label>
<input type="range" min="0" max="10" step="2" id="rangeVal">
<label>10</label>
<br>
<label>您选择的值是:</label>
<output name="result" for="rangeVal"></output>
</form>
‘input’标签
‘input’标签是一个没有内容的标签,按照布局类型它属于“行内块级元素”,它是通过设置属性及属性值来决定它的显示类型的
‘input’标签常用属性
type:指定input类型
autocomplete:设置是否自动完成,其值为:on/off
autofocus:规定输入字段在页面加载时是否获得焦点,不适用于type= ‘hidden’
checked:默认选择,对type值为‘checkbox’及‘radio’有效
disabled:禁用
size:设置输入字段的宽度
maxlength:设置输入字段的最大长度
width:设置宽度,(适用于 type=‘image’)
height:设置高度,(适用于 type=‘image’)
step:设置输入字段合法数字间隔
required:表示输入字段为必需
readonly:表示只读
placeholder:设置输入框的占位符
pattern:规定输入字段的值的模式或格式。例如 pattern=‘[0-9]’表示输入值必须是 0 与 9 之间的数字。
multiple:如果使用该属性,则允许一个以上的值,适用于‘select’及‘datalist’
min:设置输入字段的最小值
max:这是输入字段的最大值
list:引用包含输入字段的预定义选项的 datalist 。
value:设置input的值
‘type’属性值
text:普通输入框
password:密码输入框
radio:单选宽
checkbox:多选框
file:文件
button:普通按钮
submit:提交按钮
reset:重置按钮
image:图片按钮
hidden:隐藏域
email:邮箱输入框
url:资源地址
search:搜索框
number:数值输入控件
tel:电话号码
range:数值选择范围控件
date:日期选择控件
month:月份选择控件
week:周选择控件
time:时间选择控件
datetime:日期时间选择控件
datetime-local:本地日期时间选择控件
color:颜色选择控件
对表单元素编组
对于一些复杂的表单,有时需要将一些元素组织在一起,为此可以使用‘fieldset
’元素。在每一个‘fieldset
’元素中添加一个‘legend
’元素即可添加表单相关说明,‘legend’元素必须是fieldset元素的第一个子元素,用法类似于‘details
’元素与‘summary
’元素的关系。
代码示例:
<form>
<fieldset>
<legend>Enter Your Info</legend>
<label>账号:</label><input type="text" name=""><br><br>
<label>密码:</label><input type="passowrd" name=""><br><br>
</fieldset>
<fieldset>
<legend>Enter Your Hobby</legend>
<label>#1:</label><label>账号:</label><input type="text" name=""><br><br>
<label>#2:</label><label>账号:</label><input type="text" name=""><br><br>
<label>#3:</label><label>账号:</label><input type="text" name=""><br><br>
</fieldset>
</form>
显示效果: