#前端学习#------表单标签

由于本人也是初学HTML，以下都为本人学习过程中分点整理的知识点，希望共同进步，不足之处望指出批正。

1.什么是表单

    表单是用来专门收集用户信息的

2.什么是表单元素

    表单元素其实好是HTML中的一些标签

3.表单的格式

    <form>

        <表单元素>

    </form>

4.常见的表单元素

    -举例：

    input标签：input标签有一个type属性，这个属性有不同取值，取值的不同决定了input标签功能和外观

    type取值：text（明文输入框）

                    password（暗文输入框）

                    button（按钮，可点击）

                    image（图片，可点击）

                    reset（重置清空按钮，可点击）

                    submit（提交，可点击）

                    hidden（隐藏，用户界面看不到）

                    email（使用时输入框内容需符合邮箱格式）

                    url（使用时输入框内容需符合URL格式）

                    number（使用时只能输入数字）

                    date（选择时间）

                    color（通过取色板选择颜色）

                    radio（单选框）

                    checkbox（多选框）

    -格式：

        <form>

            <input type="xxxx">

        </form>

    -注意点:

        -单选框：

            1. 默认情况下，单选框不会互斥，想要单选框互斥，那么必须每一个单选框标签都设置一个name属性，然后name属性还必须要设置相同值

            例如：<input type="radio" name="xx">男

                      <input type="radio" name="xx">女

            2. 要想让单选框默认选中某一个框子，可以给input标签加一个checked标签

            例如：<input type="radio" name="xx">男

                      <input type="radio" name="xx" checked="checked">女

    

    -多选框

            1. 单选框设置多个checked，只会执行最后一个checked

            2. 多选框设置多个checked，会同时执行

            例如：

            <input type="checkbox">篮球

            <input type="checkbox">足球

            <input type="checkbox" checked="checked">排球

    -按钮：

            1.格式：<input type="button" value="我是按钮" οnclick="alert(123)">

    -图片按钮：

            1.格式：<input type="image" src="图片.png" οnclick="alert(123)"> 

    -清空按钮：

            1.格式：<input type="reset" value="清空">

    -提交按钮:

            1.格式：<input type="submit" οnclick="alert(123)">

            

            把表单中填好的数据提交到远程服务器必须满足以下条件：

            1. form表单添加option属性，指定提交的服务器

            2. 需要提交到服务器的表单元素需要添加一个name属性

            例如：

                <form action="服务器地址">

                    <input type="text" name="username"> 

                </form>

5.label标签

    -作用：点击文字输入框不会聚焦，想点击文字让对应输入框聚焦，就需要让文字和输入框进行绑定，用label标签

    -格式：

    <form>

        <label for="account"></label><input type="text" id="account">

        <label for="pwd"></label><input type="password" id="pwd">

    </form>                                

            1. 将文字利用label标签包裹起来

            2. 给输入框添加一个ID属性

            3.在label标签中通过for属性和输入框中的ID进行绑定即可

6.datalist标签

    -作用：给输入框绑定待选项

    -格式：

        <input type="text" list="cars">

            <datalist id="cars">

                <option>待选项内容</option>

            </datalist>

         搞一个输入框

        搞一个datalist列表

        给datalist列表标签添加一个id

        给输入框添加list属性，将datalist的id对应的值赋值给list属性即可

7.select标签

    -作用：用于定义下拉列表

    -格式：

        <select> 

            <optgroup label="分组名称">

                <option>列表数据</option>

            </optgroup>

        </select>

    -注意点：

        1. 下拉列表不能输入内容，但是可以直接在列表中选择内容

        2. 可通过option标签添加一个selected属性，指定列表默认值

        3. 可通过option标签包裹一层optgroup标签来给下拉列表中的数据分类

8.textarea标签

    -作用：定义一行多个输入框

    -格式：<textarea></textarea>

    -注意点：

        1. 默认情况下输入框可以无限换行

        2. 默认情况下输入框有自己的宽/高度

        3. 默认情况下输入框可手动拉伸