web 前端开发Form表单

表单在web网页中用来给用户填写信息，从而能采用用户信息，使网页具有交互功能。

所有的用户输入内容的地方都用表单来填写，如登陆注册、搜索框

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。

 <form action=""method=""name=""></form>

属性说明

action服务器地址

name表单名称

method中Get和Post的区别

1、数据提交方式，get把提交的数据url可以看到，post看不到

2、get一般用于提交少量数据，post用来提交大量数据

表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

1、表单标签

2、表单域（输入框）

3、表单按钮

    <form>

        <input>

        <input type="submit">

    </form>

文本框

文本框通过<input type="text">标签来设定，当用户要在表单中键入字母，数字等内容时，就会用到文本域

<form>

    用户名：<input type="text" name="用户名">

    <br>

    电子邮箱：<input type="text" name="电子邮箱">

</form>

密码框

密码字段通过标签<input type="pssword"来定义

 Password：<input type="password" name="pwd">

温馨提示

密码字段字符不会明文显示，而是以星号或原点替代

input子元素中type的属性（延申）：

1、checkbox :小方框

2、radio:小圆圈供人勾选 后面的name将多个radio给予相同的name那么就变成单选了。通常用于勾选性别。

3、section：与input平级 select提供供人选择的条子，例如选择国家，与option配合使用option 里面写的是供人选择的选项。

Country: <select>
<option>Select Your Country</option>
<option>China</option>
<option>Russia</option>
<option>India</option>
<option>Iran</option>
</select><br><br>

4、file选择文件

5、reset用于消除上面填写的内容（重置）

6、fieldset:与input平级用于设置整个表单的边框用legend设置名称

7、hidden:在表单中不显示，但是点击提交后会显示在上方的链接中

8、datetime：日期和时间

9、date：自动生成选择性日历

10、Mouth:自动生成月份选择

11、number:用于接收数字信息

12、email：只能输入正确的emile才可以输入

13、URL

二、input的子元素

1、value 用于设置默认输入值，在用户未输入任何东西时会进行默认输入。

2、size用于设置文本框的长度。但是不会限制输入的内容的多少。

3、maxlength用于设置输入字符的最大长短

4、redonly:可以选中但不能在后面填写。

5、disabled：后面将不会被选中。

6、min/max：作为一个变量用于设置变量的最小值

7、accept：用于文件上传，如果我写accept=images，那么只能上传图像，别的属性文件包不行。通常用于type=“file”后。

8、multiple:用于增加上传的文件数，这样我们可以一次上传多个文件。

9、placeholder：用于添加指示，例如placeholder=“please enter your name”

10、required：用于设置必须填写的值，如果这项未填写将无法进行提交。

11、autofocus：用于自动锁定

12、list：也是选择表 

Lanuage: <input list="lang">
<datalist id="lang">
<option value="Chinease"></option>
<option value="English"></option>
<option value="Arabic"></option>
<option value="Urdu"></option>
<option value="Arhamic"></option>
</datalist>

提交按钮

当用户点击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<input type="submit" value="登录"(作用是替换文本）>

块元素与行内元素（内联元素）

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行（自上而下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width,height属性	行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1-h6、hr、p、table、ul、等

常见内联元素（行内元素）

a、b、em、I、span、strong等

行内块级元素（特点：不换行、能识别宽高）

button、img、input