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

form表单基本格式

<form action="" method="">
    表单其它元素
</form>

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

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

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

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

HTML 表单包含表单元素。

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

<input>框的不同类型

1.纯文本单行输入框

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

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

<input type="text"name="text"value="hello">

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

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

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

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

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

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

2.密码输入框

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

<input type="password"name="password">

3.单选按钮

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

请选择性别：女<input type="radio"value="女"name="gender">
男<input type="radio"value="男"name="gender">

效果

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

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

<label>男<input type="radio"value="男"name="gender"></label>

效果：

 

4.多选按钮

type="checkbox":多选框

多选按钮1<input type="checkbox"value="多选按钮1"name="book2">
多选按钮2<input type="checkbox"value="多选按钮2"name="book2">
多选按钮3<input type="checkbox"value="多选按钮2"name="book2">

 

5.复位按钮

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

<input type="reset"value="复位按钮">

效果：

 

6.提交按钮

type="submit":提交表单

<input type="submit" value="提交">

7.图像按钮 

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

<input type="image"value=""src="(url)">

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

<input type="image"value=""src=""width="200"height="200">

 

8.文件选择按钮

type="file"

文件选择<input type="file"value="选择文件">

效果： 

 

9.邮箱输入框

type="email"

邮箱：<input type="email" name="email">

10.数字选择器

type="number"

数字选择：<input type="number" name="number"max="10" min="1">

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

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

效果：

 

11.颜色选取器

type="color"

<input type="color" name="color">//默认为黑色

 效果：

 

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

type="date"

<input type="date" name="date">

效果：

 

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

type="time"

 <input type="time" name="time">

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

type="datetime-local"

<input type="datetime-local" name="date-local">

 

<textarea>多行文本域（可输入多行文本）

<textarea maxlength="100" name="name" cols="100" rows="5" ></textarea>

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

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

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

 

<select>下拉列表

选择城市：<select name="select">
            <option value="1">北京</option>
<!--        selected="selected":默认选择-->
            <option value="2" selected="selected">上海</option>
            <option value="3">重庆</option>
        </select>

1.<option></option>:添加下拉列表的可选择项

效果：

2.multiple="multiple"：在<select>中加入此属性，下拉列表是展开形式

选择城市：<select name="select" multiple="multiple">
            <option value="1">北京</option>
<!--        selected="selected":默认选择-->
            <option value="2" selected="selected">上海</option>
            <option value="3">重庆</option>
        </select>

效果：