html的form标签的基本介绍及使用

---

前言

什么是表单？表单是html用与搜集不同类型的用户输入表单是一个区域，用来采集信息。

---

1.什么是form标签

1.1 基本介绍

form标签是html中重要的组成部分，是用与搜集不同类型的用户所输入的信息，form标签以<form>开始，以</form>结束。

1.2 form标签的相关属性

1.2.1 action属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

1.2.2 method属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
getpost表单数据以值得方式追加到URL中表单数据不会追加到URL，会隐藏显示用于提交非敏感数据可提交敏感数据
注释:GET 最适合少量数据的提交。浏览器会设定容量限制。

1.2.3 name属性

一个页面上的表单可能不止一个，为了区分这些表单，就需要name 属性给表单命名，通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格。

2.form标签的元素

2.1 input元素

input元素是最重要的表单元素

input元素根据不同的type属性，可以变化为多种形态。

2.1.1 text

<input type="text"> 定义供文本输入的单行输入字段：

列如

<form action="">

    用户名：

    <input type="text">

</form>

以上代码在浏览器中看上去时这样的：

2.1.2 password

<input type="password"> 定义密码字段：

列如

<form action="">

    密码：

    <input type="password">

</form>

以上代码在浏览器中看上去时这样的：

2.1.3 submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

列如

<form action="">

    <input type="submit">

</form>

以上代码在浏览器中看上去时这样的：

注释：submit可以通过value属性改变浏览器上所显示的内容

2.1.4 radio

<input type="radio"> 定义单选按钮。

列如

<input type="radio" name="xingbie"vaule="男"checked>男

<input type="radio" name="xingbie"vaule="女">女

以上代码在浏览器中看上去时这样的：

2.1.5 checkbox

<input type="checkbox"> 定义复选框。

列如

<input type="checkbox">足球

<input type="checkbox">篮球

<input type="checkbox">lol

<input type="checkbox">韩剧

<input type="checkbox">王者荣耀

以上代码在浏览器中看上去时这样的：

2.1.6 button

<input type="button> 定义按钮。

列如

<input type="button" οnclick="alert('Hello World!')" value="Click Me!">

2.1.7 html5新增的属性

类型作用number 限制输入为数字才能生效 email 限制输入为邮箱才能生效 color 获取焦点后会弹出颜色选择器 date日期选择器会出现在输入框中range 能够显示滑块字段month 日期选择器（月份）week 日期选择器（周） time 时间选择器 datetime 时间选择器 datatime-clocle 日期选择器 tel 电话输入url 在提交时能够自动验证 url 字段。search 用于搜索字段（搜索字段的表现类似常规文本字段）

2.2 input元素的其他属性

checked：设置单选框、复选框，初始状态是选中，属性值仅有checked。

disabled：设置首次加载禁用该元素，属性值仅有disabled，表示该元素被禁用。

maxlength：设置文本框输入的最大字符数。

readonly：只读，表示文本框的内容不允许用户直接进行修改。

size：设置该元素的宽度。

src：设置图像域所显示的图像的URL。

2.2 select元素（下拉列表）与option元素

<select> 元素定义下拉列表：*<option>* 元素定义待选择的选项。

select元素与option元素通常配套使用

select的name属性可以指定提交名称,id可以配合<labl>的for属性实现鼠标点击优化.

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

你能通过multiple="multiple" 属性 ------- 以列表形式显示

列如

<select name="qinsad" id="dasdas" value="请输入您的选择">

        <option value=""selected>重庆</option>

        <option value="">上海</option>

        <option value="">北京</option>

        <option value="">杭州</option>

    </select>

以上代码在浏览器中看上去时这样的：

2.3 textarea元素

<textarea> 元素定义多行输入字段（文本域）：

textarea表示一个多行纯文本编辑器，可以用于用户 。可以设置id属性与<lable>实现鼠标点击优化，cols和rows属性可以设置编辑器显示大小，name属性用于指定提交名称。

列如

<textarea name="" id="" cols="30" rows="10"> </textarea>

以上代码在浏览器中看上去时这样的：

---

总结

form表单时html的重要组成部分，以上时form标签的一些基本介绍。