form表单的使用（常用的input类型、＜select＞、＜textarea＞及其属性）

form表单基本格式

    表单其它元素

action=“”：表单提交url（地址）。

method=“”：表单提交方式，有get、post两种请求。

get方式：表单数据在页面地址栏中是可见的，GET 最适合少量数据的提交，浏览器会设定容量限制

post方式：POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。对于数据传输，没有大小限制

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

框的不同类型

1.纯文本单行输入框

type="text":纯文本单行输入框

name="":如果要正确地被提交，每个输入字段必须设置一个 name 属性

（可选属性）
1.value=“”：文本输入框具有一个默认值
2.placeholder="请输入账号"：加入此属性；文本框会有提示词  
效果：

3.autocomplete="off":加入此属性，之前文本框输入过的值不会显示

4.readonly="readonly"：加入此属性，输入框将只应许读，不可进行写操作

5.disabled="disabled"：文本输入框禁用

6.required="required"：提交信息时，如果输入框为空，会提示输入不能为空

7.autofocus="autofocus"：当打开页面时，此input框会自动获取光标焦点

2.密码输入框

type="password":密码输入框，输入密码时密码将被隐藏化

3.单选按钮

type="radio":单选按钮。必须要将name=""的值设置为一样的，才能实现单选的效果

请选择性别：女
男

效果

1.checked="checked"：加入该属性，该元素将默认被选中

2.:用该标签包裹，点击文字也能实现选中效果

男

效果：

 

4.多选按钮

type="checkbox":多选框

多选按钮1
多选按钮2
多选按钮3

 

5.复位按钮

type="reset":将表单恢复到最初的样子

效果：

 

6.提交按钮

type="submit":提交表单

7.图像按钮 

type="image":点击图片可进行表单的提交，相当于提交按钮

1.width="200"：设置图片宽度
2.height="200"：设置图片高度 

 

8.文件选择按钮

type="file"

文件选择

效果： 

 

9.邮箱输入框

type="email"

邮箱：

10.数字选择器

type="number"

数字选择：

1.max="10":设置最大可取值到10

2.min="1":设置最小可取值为1

效果：

 

11.颜色选取器

type="color"

//默认为黑色

 效果：

 

12.日期选取（ 年、月、日）

type="date"

效果：

 

13.时间选择器（时、分）

type="time"

14.日期选择器（年、月、日、时、分）

type="datetime-local"

 

多行文本域（可输入多行文本）</h3> <pre><code class="language-html"><textarea maxlength="100" name="name" cols="100" rows="5" >

1.maxlength="100":设置文本最大可输入字符

2.cols="100":以100个字符个数设置文本宽度

3.rows="5":以5个字符个数设置文本高度

 

下拉列表

选择城市：

北京 上海 重庆

1.:添加下拉列表的可选择项

效果：

2.multiple="multiple"：在中加入此属性，下拉列表是展开形式 
  
选择城市：
            北京

            上海
            重庆
        

效果：