表单post和get提交
常用于登录和注册.
- 表单标签:form
- 属性action:表单提交的位置,可以是网站,也可以是一个请求处理地址
- 属性method:属性值有post、get
- 属性值post:在url中看不见提交信息,比较安全,可以传输大文件
- 属性值get:在url中我们可以看见我们提交的信息,不安全,但是高效
- 文本输入框标签:input
- 属性type:输入的类型(文本:text、密码:password、提交:submit、重置:reset)
- 属性name:文本框名字
表单元素格式(详细版):
属性 | 说明 |
type | 指定元素的类型。text(文本框)、password(密码框)、checkbox(多选框)、radio(单选框)、submit(提交按钮)、reset(重置按钮)、file、hidden(隐藏)、image(图片按钮)、button(按钮)。默认text |
name | 指定表单元素的名称 |
value | 元素的初始值。type为radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text或password时,输入的最大字符数 |
checked | type为radio或checkbos时,指定按钮是否是被选中 |
value、maxlength、size的使用
单选框radio的使用
radio使用时,name需要为一组,同时,可用checked实现默认选中,该处未使用。
name不同组:
按钮和多选框的使用
多选框checkbox:可用checked默认选中
按钮button与图片按钮image:
综上:已出现的按钮为
input type=“button” vaule=“按钮显示内容” //普通按钮
input type=“image” src=“图片路径” //图片按钮
input type=“submit” vaule=“按钮显示内容” //提交按钮
input type=“reset” vaule=“按钮显示内容” //重置按钮
列表框文本域和文件域
下拉框select标签
<select name="列表名称" >
<option value="选项值">选项1</option>
<option value="选项值" selected>选项2</option> //selected:默认选项在2
<option value="选项值">选项3</option>
</select>
案例:用selected默认选中上海
文本域textarea标签
<textarea name="文本域名" cols="列" rows="行">文本内容</textarea>
文件域input标签
input标签中,type=file
<p>文件域:<input type="file" name="files"><input type="button" value="上传" name="upload"></p>
搜索框滑块和简单验证
使用input标签,当type未email时,会进行简单验证:
邮箱验证:type=email
邮箱:<input type="email" name="email">
url验证:type=url
url:<input type="url" name="url">
数字验证:type=number
max:最大值
min:最小值
step:每个数字间隔10
数字验证:<input type="number" name="num" max="100" min="0" step="10" >
音量滑块:type=range
min:最小值
max:最大值
step:每次变化2
搜索框:type=search
<p>搜索框:<input type="search" name="search"></p>
表单的应用
- 隐藏域:hidden
- 只读:readonly
- 禁用:disabled
- 增强鼠标可用性:label标签
(for与id共同使用 )
表单初级验证
进行表单验证:保证数据的安全,减少请求数量
表单验证常用方式:
- placeholder:提示信息,可用于所有文本框
- required:非空判断,可用于所有文本框
- pattern:正则表达式