二续的HTML学习主要是讲到表单的相关知识点,下列就是本次关于表单学习的一些知识点囊括情况。
表单
From表单用于用户与web应用程序进行数据交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。
- 使用表单控件时一般要与label标签配合使用,用于描述其目的。
action
:用于处理表单信息
method
:浏览器用来提交表单的http方法,常用get/post。
get: 对应于http协议的get方法,表单标签被附在url上,使用“?”分隔
post: 对应于http协议的post方法,表单标签被包含在http协议的请求报文的体部
name
:设定表单的名称
target
:代表响应打开的方式
_self,_blank,_parent,_top
- 通过enctype属性设定表单数据的内容类型。
- application / x-www-from-urlencoded
- multipart / from-data
- text / plain
- input表单组件
Input组件用于接受来自用户的数据,其可用属性如下
type
属性
text 单行文本输入框
password 密码框
checkbox 复选框,默认选中,必须用value来表示该组件提交的值
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件选择按钮,文件上传按钮
form默认的enctype设置成的multipart/form-data。method设置成post提交方式。
form默认的enctype设置成的application/-from-urlencoded。特殊字符的ASCII码。method默认get提交方式。
hidden 隐藏域
img 图片按钮 (src alt width height)
button 普通按钮
一些具体相关按钮代码举例:
- 提交按钮:
<input type="submit" value="">
<input type="image" src="" alt="">
<button type="submit"></button>
<button></button>写在表单内部的button按钮
- 重置按钮:
<input type="reset" value="">
<button type="reset"></button>
- 普通按钮:
<input type="button" value="">
<button type="button"></button>
-
表单控件
fieldset
组件用于在一个web表单中对多个控件和标签进行分组。fieldset
的标题由<legend>
标签提供
Input组件用于接受来自用户的数据,其可用属性如下
name 属性用来设定控件名和提交数据的属性名
value 用于控件值初始化,可选
checked 单选框,复选框默认选中属性
disabled 表示禁用组件,禁用组件的值也不能被提交
size 当前控件的初始宽度,这个宽度以像素为单位。
maxlength 指定可以输入的字符的最大值。
button
表单组件的type属性用于表示控件类型,name属性用来表示按钮名称。
select
表单控件[select用于下拉列表或列表]
multiple 指定控件类型( 布尔类型的值)
size 显示的行数。当要表示一个可以滚动的列表时候,size表示同时展示
optgroup
用于表示包含option的选项组,常包含在 <select>
中。选项默认选中用selected
。
textarea
用于表示多行文本框,没有value属性,其值被包含在标签内。
rows 定义文本框的行数
cols 定义文本框的列数
warp 表示是否自动换行。 (1)off 不自动换行。 (2)hard 自动硬回车换行,换行元素一同传送到服务器中。(3)soft 自动软回车换行,换行元素不会传到服务器中
disabled 表示禁用组件,禁用组件的值也不能被提交
readonly 布尔属性,表示该组件只读,其值依然会被提交。
name 用于指定该组件的名字,会随着其值一同被提交到后台中。
巩固学习
- 表单控件的布尔属性:
disabled 禁用的,可见不提交
readonly 可见只读提交
selected option标签上选中的option
checked 单选按钮和复选框上,选中的
multiple select标签上,是否允许多选,可摁住Ctrl多选
…
autofocus 自动对焦
- type属性
number 数字控件(只能输入数字) 可以与属性min、max、step配合使用
range 范围控件(通过控制条调整值)可以与属性min、max、step配合使用
search 搜索控件
tel 电话控件
color 颜色控件
url 地址控件
eamail 邮箱控件
date 日期控件(年月日,不包含时间) 火狐支持
time 时间控件 火狐支持
datetime-local 日期时间控件
month 月插件
week 周插件
注:大部分的控件只能在Chrome和Opera浏览器显示
- H5新增的type属性值通过代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5新增的type属性</title>
</head>
<body>
<h3>h5新增的type属性值</h3>
<form action="">
<div>
<label for="">年龄:</label>
<!-- step步长,加多少或者减多少 -->
<input type="number" name="age" id="" min="15" max="90" step="10">
</div>
<div>
<label for="">搜索:</label>
<input type="search" name="search" id="">
</div>
<div>
<label for="">滑块:</label>
<!-- 默认取值0-100 可以通过min和max设置大小范围 step属性是指的滑动步长-->
<input type="range" name="range" id="" min="10" max="20" step="5">
</div>
<div>
<label for="">电话号码:</label>
<!-- pattern表单验证的属性,属性值是正则表达式,\d代表的是数值0-9 {}里放的是次数限制 -->
<input type="tel" name="tel" id="" maxlength="11" pattern="1\d{10}">
</div>
<div>
<label for="">网址:</label>
<input type="url" name="url" id="">
</div>
<div>
<label for="">颜色:</label>
<input type="color" name="color" id="">
</div>
<div>
<label for="">邮箱:</label>
<input type="email" name="email" id="" pattern="[a-z]{1,}@[a-z]{1,}\.com">
<!-- \w 字母1到多次 \w+@\w+\.com-->
<!-- [a-z]{1,} 字母a-z一到多次 -->
</div>
<div>
<label for="">日期控件:</label>
<input type="date" name="date" id="">
</div>
<div>
<label for="">日期时间控件:</label>
<input type="datetime-local" name="datetime-local" id="">
</div>
<div>
<label for="">时间控件:</label>
<input type="time" name="time" id="">
</div>
<div>
<label for="">月控件:</label>
<input type="month" name="month" id="">
</div>
<div>
<label for="">周控件:</label>
<input type="week" name="week" id="">
</div>
<button>提交</button>
</form>
</body>
</html>
- 上述演示代码操作后的效果图显示如下