html之表单标签

一，表单标签，text、password、radio、checkbox、name、checked等属性

<!--
    表单标签
    什么是表单?
    表单就是专门收集用户信息的
    什么是表单元素?
    表单元素还是html中的标签,只是比较特殊罢了

    1,格式:
    <form>
        <表单元素>
    </form>
    2,常见的表单元素
    input标签:有一个type的属性,非常重要
-->
<form>
    <!-- 明文输入框 -->
    账号: <input type="text"><br>
    <!-- 安稳输入框 -->
    密码: <input type="password"><br>

    <!-- 带默认值的输入框 -->
    <!--账号: <input type="text" value="123456"><br>-->
    <!--密码: <input type="password" value="111111">-->

    <!--
        单选框 radio
        注意点:
        1,单选框不具有互斥事件,要想有互斥事件响应,就必须给每一个input标签设置一个 name 属性
         并且name属性的值是一样的,这样单选框就会有互斥事件了
         例如:name="gender"
        2,默认选中属性 checked ,在哪个input标签里面设置这个属性就会默认选中这个单选框
        3,在html5中如果属性的取值和属性的名称是一样的,那么就可以省略属性的值,但是在企业开发中一般是不会省略的
    -->
    性别:
    <input type="radio" name="gender" checked="checked"> 男
    <input type="radio" name="gender"> 女
    <input type="radio" name="gender"> 保密 <br>

    <!-- 多选框 checkbox ,默认选中和单选框是一样的原理 -->
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox" checked="checked">足球
    <input type="checkbox">棒球
    <input type="checkbox" checked="checked">羽毛球
    <input type="checkbox">其他

</form>

二，表单标签，按钮属性

<form action="https://www.jd.com">
    <!-- 明文输入框 -->
    账号: <input type="text" name="username"><br>
    <!-- 安稳输入框 -->
    密码: <input type="password" name="passwd"><br>

    <!--
        title按钮,可以通过value给按钮指定标题
    -->
    <input type="button" value="我是按钮">
    <!--
        image按钮,按钮用图片代替
    -->
    <input type="image" src="btn.png">
    <!--
        重置按钮,将所有的数据清空
        注意点:
        如果想要改变按钮标题的title,就使用value属性赋值即可
    -->
    <input type="reset" value="清空">

    <!--
        提交按钮,将表单里面填写好的内容提交给远程的服务器
        注意点:
        要把表单里面的数据提交到服务器,必须具备两个条件
        1,要给form表单添加一个action属性,通过action属性可以指定到需要提交服务器的地址
        2,需要给需要提交到服务器的表单元素添加一个name属性
    -->
    <input type="submit">

    <!--
        隐藏域,配合提交按钮将一些数据悄悄咪咪的提交给服务器
        ajax
    -->
    <input type="hidden" name="phone" value="123456">
</form>

三，表单标签，label标签

<!--
    点击文字时,想让输入框聚焦
    1,使用label标签,可以使得文字和输入框关联在一起
    2,label使用格式 (推荐这样使用)
    (1),首先在文字内容上包裹 label 标签
    (2),在 input 标签里面设置 id 属性值,例如id="account"
    (3),在 label 标签里面添加 for 属性,属性值为对应input标签里面的id值,例如 for="account"
-->
<form>
    <label for="account">账号:</label> <input type="text" id="account"> <br>
    <label for="passwd">密码:</label> <input type="password" id="passwd"> <br>

    <!--
        也可以利用这一中方式进行绑定,但是这样一来就无法实现交叉绑定的需求
         例如:账号文字绑定密码输入框,密码文字绑定账号输入框
    -->
    <label>
        账号: <input type="text"> <br>
    </label>
    <label>
        密码: <input type="password">
    </label>
</form>

四，datalist标签的使用

<!--
    datalist标签,给输入框绑定待选项 （了解即可）
    1,格式:
    <datalist>
        <option>待选项内容</option>
    </datalist>

    2,如何给输入框绑定待选列表
    (1),首先利用datalist标签写出待选列表的内容
    (2),在datalist标签里面设置属性 id ,例如 id="cars"
    (3),在input标签里面的添加 list 属性值, 例如 list="cars"
-->

请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>哈弗</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

五，下拉框select和多行输入框textarea

<!--
    select标签,下拉列表
    1,格式:
    <select>
        <optgroup label="分组名称">
            <option>列表数据</option>
        </optgroup>
    </select>

    option:选项
    optgroup:opt(选择),group(组)

    2,注意点
    (1),下拉列表不能输入内容,但是可以直接在列表中选择内容
    (2),可以通过对option标签设置 select 属性值,使得对应的option标签值为默认值
    (3),可以通过给 option 标签包裹一层 optgroup 标签来给下拉列表中的数据分类
-->

<select>
    <optgroup label="北京">
        <option>朝阳区</option>
        <option>昌平区</option>
        <option>通州区</option>
    </optgroup>

    <optgroup label="广州">
        <option>天河区</option>
        <option>黄浦区</option>
    </optgroup>
</select>

<hr>

<!--
    textarea标签:,多行输入框
    1,格式:
    2,注意点:
    (1),可以通过textarea标签的cols(列数)和rows(行数)设置输入框的展示大小
    (2),在输入时可以通过鼠标拖动输入框右下角放大缩小输入框
    (3),textarea输入框,可以输入无限内容
-->
<textarea cols="3" rows="5"></textarea>