HTML5 , form表单 , input标签type属性

form表单

1. 基本结构

<form action=”提交的地址” method=””></form>

1. 文本框

eg：

注释：style里面是设置文本框的宽度和高度

实际效果展示：

1. 密码框

基本结构：

实际效果展示：

1. 单选框

基本结构：

注释：通过name所跟的属性值达到互斥的效果

实际效果展示：

1. 复选框

基本结构：

实际效果展示：

1. 普通按钮

基本结构：

实际效果展示：

1. 提交按钮

基本结构：

实际效果展示：

注释：可以直接提交到action所指的路径；如果要到本地的html文件需要先打开本地的html文件然后再复制其在网页的地址（不要用a标签去覆盖）

1. 重置按钮

基本结构：

实际效果展示：

注释：style里面可以设置button的宽度、高度、字体颜色、背景颜色

1. 图片按钮

基本结构：

实际效果展示：

注释：可以直接用width设置也可以在style里面设置

1. 文件上传

基本结构：

实际效果展示：

h5对于form表单的加强

1.邮箱

基本结构

显示效果

1. url网址

基本结构

实际效果展示

1. 数字

基本结构

实际效果展示

1. 搜索框

基本结构

实际显示效果

1. 自由拖动滑块

基本结构

实际显示效果

1. 小时分钟

基本结构

实际显示效果

年月日

基本结构：

实际显示效果：

1. 年月

基本结构

实际显示效果

1. 年周

基本结构

实际显示效果

1. 颜色

基本结构

实际显示效果

1. placeholder 提示用户输入的信息

eg:

实际效果展示：

1. autofocus  页面获得的焦点表现为文本框是黑色的

eg:

实际效果展示：

1. multiple  多文件上传   

eg:

实际效果展示

1. autocomplete  文本框中的文本是否保存

eg：

1. required  必填项内容不能为空

eg：

实际效果展示：

1. accesskey 元素快捷键跳转   

eg:

注释:后面accesskey后面跟的值是哪一个快捷跳转到这个input标签的方法就是alt+accesskey后面跟的属性的值

1. form外面的input标签

表单包含input标签不一定在form表单里面，也可以通过id和form相对应

其他框

1. 多行文本框

基本结构：

注意：cols代表列数  rows代表行数

实际效果展示：

1. 下拉表单

基本结构：

实际效果展示：