form表单-html

form 标签

        表单，可以用来提交数据

        form 是一个块标签

        action 属性，提交的数据要提交到的服务器地址，一般是接口地址

        method 属性，数据的提交方式

            他的值有

                get，post，put，delete等

            get: get请求可以把数据拼接到 接口地址的 url上，缺点是不安全，提交的数据较少

            post： post请求，在post提交的数据信息中，不会看到提交的数据结构，相比较get是安全的，并且提交的数据较大

        label标签，行标签，经常和input搭配使用，表示input的标题

        input标签，行标签，输入框，常用于表单输入

            type属性，用来设置输入框类型

                属性值

                    text 文本输入框

                    password 密码输入框

                    button 普通按钮

                    submit 提交按钮

                    reset 重置按钮

                    radio 单选框

                    checkbox 多选框

                    hidden 隐藏框

           

            value属性，设置input的值

            name属性，对于界面的显示没有任何影响，主要用于数据交互，实质上name的值即是后台数据的字段名

注意：

        单元框 同一类型选项,他们的name值必须相同

            label 的for 属性,用来绑定对应 id的input,例如

            <label for="abc"></label> 只要对该label操作，则会在当前页面找到 id="abc"的input，并且选中该input

            placeholder 属性，输入框的提示信息

            maxlength  属性，输入字符的最大长度

            minlength  属性，输入字符的最小 长度

            单选框和复选框的默认选中，只需要在 input 上设置checked属性即可

            禁用某一个input 标签，只需要给 input 添加 disabled 属性即可

            给某一个输入框添加一个只读属性 readonly，确保该输入框内容可以通过程序修改，并且能提交到后台

            disabled 和 readonly 的异同：他们都不能手动修改

            不同的是 disabled的值不能提交和使用，readonly的值可以提交到后台

input 属性 ,input虽然是行标签，但是可以设置宽高

            minlength 最少字符数

            required 设置为必填项

            type 属性补充

                file 提交文件

                number 输入数字

        select 下拉框，行标签

            他的子级必须是 option 标签，每一个 option 标签表示一个选项，option标签具有 value属性

        fieldset 创建一个组

            legend 组的标题

       

        textarea 多行文本输入框

            属性

                rows 设置具有多少行

                cols 设置具有多少列

设置 textarea

                通过 css的resize属性，设置 拖拽的方向

                horizontal 横向拖拽

                vertical 纵向拖拽

                both 双向拖拽

                none 不拖拽

 普通 input 的type类型

        text,password,hidden,submit,reset,radio,checkbox,file,number,button

        input属性

            autofoucs 自动获取光标，自动聚焦

<form action="###" method="get">
        <!-- email 约束输入内容为 -->
        邮箱：<input type="email" value="" autofocus /><br>

        <!-- url 约束输入内容为网址 -->
        网址：<input type="url" value="" /><br>

        <!-- number 约束输入内容为数字
             step 属性为，每次的步长
        -->
        年龄：<input type="number" value="" step="10" /><br>

        <!-- color 取色器 -->
        取色器：<input type="color" value="" /><br>

        <!-- 
            range 滑竿 
            min 最小值
            max 最大值
            value 当前值
        -->
        滑竿：<input type="range" min="0" max="100" value="10" value="" /><br>

        <!-- date 显示日期 -->
        日期：<input type="date" value="" /><br>

        <!-- date 显示日期到月 -->
        月份：<input type="month" value="" /><br>

        <!-- week 显示当前周 -->
        周：<input type="week" value="" /><br>

        <!-- time 设置时间 -->
        时间：<input type="time" value="" /><br>

        <!-- date 设置当地时间 -->
        设置当地时间：<input type="datetime-local" value="" /><br>

        <!-- image 图片提交按钮 -->
        <input type="image" src="../src/1.mp4" width="100" value="" /><br>

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