前端开发之表单小知识

 表单作用：用于收集不同类型的用户输入的数据

 表单的组成：表单元素和表单区域 2部分组成

一、

1、表单区域

            <form></form>

        作用：定义表单区域，里面可以包含表单元素。实现用户信息的收集和传递。

        2、表单元素

            是用户在表单中输入内容的标签。

            input 标签

                type="属性值不同，可以展现不同的表单形式"  

                type的常用类型：

                    type="text"；

                        作用：单行文本输入框

                    type="password";

                        作用：密码输入框

                    type="radio":

                        作用：单选框

                    type="checkbox"；

                        作用：多选框

                    type="button"；

                        作用：普通按钮

                            input type="button" value="按钮">

                        value属性：定义按钮显示的文本

                    type="submit";

                        作用：定义提交按钮；

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

                        value属性:可以修改默认的“提交”文本内容；

                    type="reset";

                        作用:定义重置按钮，将表单元素内的内容重置到初识状态。

                        value属性:可以修改默认的“重置”文本内容；

                    type="file"；

                        作用：用于文件上传

                    type="image"：

                        作用：定义图片形式的提交按钮

                        属性：

                            src：指定图片的路径

                            alt：指定替换文本

            textarea标签

                作用:定义多行文本域

                属性：

                    cols：宽度大小

                    rows：高度大小 行数

            select标签

                作用：定义下拉列表

                option标签：定义列表项

二、

  value属性：可以设置表单的初始值和修改按钮上的文字。

        name属性：

            作用：定义表单元素名称

            注意：name属性是必须的，只有设置了name属性表单元素在提交的时候才会传递他们的值。

        readonly属性：

            作用：规定当前表单元素为只读；

                <input type="text" value="张三" readonly>

       

        disabled属性：

            作用：规定当前表单元素被禁用，被禁用的表单元素不能编辑也不能被提交

        maxlength属性：

            作用：规定允许输入的最大长度

       

        placeholder属性：

            作用：用于用户输入的提示信息，输入文字，提示信息直接消失，不会影响输入的内容。

        下拉列表：

            selected属性：

                作用：规定在页面预先加载时选择该选项

            size属性：

                作用：规定下拉列表中可见选项的数目；

三、

 <form action="">

        <!-- 扩大选区范围 -->

        <!--

            语法： 为input标签定义标注（标记） id名称

                    通过 label标签的for属性进行连接 （for的属性值=id名称），绑定表单元素。

         -->

        <input type="radio" name="six" id="usname"><label for="usname">男</label>

        <input type="radio" name="six" id="nv"><label for="nv">女</label>

    </form>

四、outline

 /*

            outline: none; */

            /* 描边  它是不占位的

                outline属性：

            */

五、

  action属性：

                作用：定义目标的文件名，

            target属性:

                作用：设置目标地址的打开方式

                取值：

                    _self  默认当前窗口打开

                    _blank 新窗口打开

           

            method属性：

                作用:规定发送表单数据的传输方式（http方法）

                取值：

                    get；将表单中的数据按照 variable=value 的形式进行传输，添加到 action 后所指向的url地址中。

                    post；将表单中的数据放在form数据流中进行传输。

                get和post的区别是什么？（了解）

                    安全

                    数据量