表单form,主要用于用户于web服务器进行交互。
<form action="" method="get" name="">
</form>
action: URL 用来处理表单信息的服务器地址
method: 浏览器用来提交表单的http方式,常用的get/post
get : 通过这种方式提交的表单数据会被附加在链接上,通过"?"分割 发送敏感内容不建议使用这种方式
post: 表单数据会存放在请求体,传递给服务器,
name: 设置表单的名称 一定要写
表单元素input是用于接受来自用户的数据。
input的type属性
例如注册表的文本框、复选按钮等等都是type来实现的。例如注册表用type属性实现的有以下属性值..
文本框
<input type="text" name="" id="">
密码框
<input type="password" name="" id="">
单选按钮
<input type="radio" name="" id="">
复选按钮
<input type="checkbox" name="" id="">
提交按钮,用于提交整个表单的用户信息给服务器的按钮
<input type="submit" value="">
input里的type还有很多架构,例如file(用于上传文件)、hidden(定义隐藏的输入文段)、rest(重置按钮)等等属性值
其他表单元素
input:
name: 用于设定控件名和提交数据的属性名 一定要写
value: 用于控件初始化 默认值等功能 (可选)
checked: 用于单选框&复选框 默认选中属性
disabled:禁用组件 禁用后组件的值也不可提交
hidden: 隐藏组件 隐藏后的组件值会被提交
size: 控件的初始宽度,单位是px,但是text和password除外,他俩是指字符的数目
maxlength:可以输入字符数量的最大值
select :列表 或者下拉列表
select 用于表示列表 或者下拉列表
multiple 指定控件类型(列表或者下拉列表) option 用于表示选项 包含在select或optgroup中 size 如果multiple生效,size表示同时展示的行数
disabled 表示禁用组件,禁用组件的值不能被提交
value 定义控件的初始值,提交表单时,初始值会被提交
selected 默认被选中的项
eg:<option disabled selected value="">请选择</option>optgroup 包含option后形成选项组,label表示组的名字
<select name="select" id="select" > <option disabled selected value="">请选择</option> <optgroup label="海南"> <option value="儋州" >儋州</option> <option value="海口">海口</option> <option value="sanya">三亚</option> </optgroup> <optgroup label="江苏"> <option value="扬州">杨州</option> <option value="苏州">苏州</option> <option value="南京" selected>南京</option> </optgroup> </select>
datalist: 表示其它控件可用的值
与select做对比
1. select选中后显示的是文本内容 datalist显示value
2. 提交的时候都是提交value
3. 在firefox上只显示内容,在chrome上显示内容和value
<label for="">
<input list="myData" name="myData">
</label>
<datalist id="myData">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">深圳</option>
</datalist>
textarea :文本域
没有value属性
rows 文本框的初始行数
cols 文本框的初始列数
disabled 禁用
readonly 只读,但是值可以提交
name
fieldset 在一个表单中对多个控件或标签进行分组
属性 disabled 直接禁用整个分组中的控件
<legend> 是分组的标题
最后
H5中对input的扩展
autofocus 自动聚焦,载入时自动聚焦于含autofocus的标签中
placeholder="请输入用户名" 提示文本
required 必填项,含有此属性的标签必须得填
pattern="1\d{10}" 判断规则(校验规则)
maxlength="11" 最长字符为11