表单（自己的学习分享）

1.表单提交的例子

        从网页获取到客户的登录名，密码--》传输到服务器--》数据库

        数据库对比返回结果--》服务器--》前端页面

 

2.form标签

        form标签是表单的标签，在form标签中可以插入input标签进行表单内容的提交

        如果form标签没有任何属性，那么在点击form标签中的提交按钮会提交到页面本身

        当form标签存在属性：action的时候会将资源全部提交给目标位置，

        注意：你需要提交的input标签，必须要拥有name属性

        如果你拥有提交位置，并且你的input标签中拥有name会发现点击提交时，url变成了本地ip地址加端口号加提交路径加url编码（？+表单这次提交的内容，他们会以键值对的 形式出现，其中键位input的name，值为我们在input框中输入的值，不同的input使用 &·· 符号进行链接

        method：提交的方法，有get、post两种方法。

        其中get方法会将所有信息在url展示出来，而post则不会。

        get：相对不安全（url可以看到传递的内容，由于地址栏的url存在长度限制，所以get能 发的内容长度受限，速度也较快）。

        post：相对安全（url看不到传递的内容，当时可以在开发者工具看到请求内容，不存在url长度限制，速度也相对较慢）。

3.input标签 

        3.1 input标签常用属性：

                type：指定元素类型。 text、password、checkbox、radio、submit、reset、file、hidden、image、 button，默认为text

                name：指定表单元素的名称（form提交时的key）

                value：为元素的内容（输入后input框中的内容改变）

                size：文本框的大小

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

                type为password时输入文本框的内容为*

                type：radio单选框（相同的name值确保他们是同一组，同一组的radio同时只能一个被 选中，checked：被该属性标记，则说明被选中）

                type：checkbox复选框（form提交key时，如果存在多个被选中，则会多次传递该值并 用&连接）

                type：email电子邮箱（email在被提交时页面会进行一个格式检查）

                type：url页面路径

                type：number（step：跨步，代表每次增加的量只能为它的倍数）

                type：range滑块（同number）

                type：search搜索框

        3.2 select标签：

                name：form提交时的key。

                size：每次展示的option个数

                mutiple：可多选。

        3.3 option标签：

                value：在被选中时，提交则将该value上送。

                select：标记则被选中。

        3.4 type：file文件（选择文件上传）

        3.5 textarea标签

                value在传递时不会传递中间的值，而是传递标签中间的内容

                style = "resize：none；"不可以改变大小（默认可以修改大小）

                cols = "x"    rows = "y"

                        宽                高

                语法：

<textarea name="自我介绍" value="这是value" style="resize: none;">这是中间文字</textarea>

        3.6 input的按钮

                type为submit或者image点击后可以提交，不过image是你选择的图片。

                type为reset会将所有input内容重置。

                type为button会成为一个按钮，它的内容取自value属性，他点击事件来自它的onclik属性，onclik属性中需要写js代码。

        3.7 input隐藏域

                

<!-- 
	input可以type="hidden"属性可以将我们的input隐藏。进行提交
-->
<input type="hidden" name="偷偷上传" value="用户看不到"/>

       3.8 input禁用和只读

<!--
	readonly会将input属性设置为只读，无法修改
	disabled 禁用（无法提交，并且样式有区别）
-->

       3.9 label标签

        

 <!--
    点击label标签会将录入信息的光标跳到进入对应id为for属性内容的inut标签中
  -->

        3.10 required：必须填写

        3.11 placehodler

<!--
placeholder相当于给予输入栏一个提示语，灰色展示
-->

        3.12 pattern

                正则表达式，不满足要求无法提交。

点击进入下一节学习分享