表单进阶

radio单选框，默认样式小圆圈，默认不会互斥，想要互斥有需要给一组单选框添加相同的name属性

<div>1.你对京东首页满意度如何div>
    <div>
        <input type="radio" name="aaa" id="">非常满意
    div>
    <div>
        <input type="radio" name="aaa" id="">满意 
    div>
    <div>
        <input type="radio" name="aaa" id="">一般
    div>
    <div>
        <input type="radio" name="aaa" id="">不满意
    div>

2.点击内容聚焦-label

label标签：当点击label的内容时，输入框自动聚焦

格式一：
<div>2.你的性别div>
    <div>
        <input type="radio" name="sex" id="man">
        <label for="man">男label>
    div>
    <div>
        <input type="radio" name="sex" id="woman">
        <label for="woman">女label>
    div>
格式二：
<div>3.你的爱好div>
    <div>
        <label for="game">
            <input type="radio" name="hobby" id="game">游戏
        label>
    div>
    <div>
        <label for="sport">
            <input type="radio" name="hobby" id="sport">运动
        label>
    div>

3.默认选中(checked)

checked 需要给 默认选中的哪一个选项添加 checked属性 checked="checked"（当属性名和属性值一样的时候可以只写一个）

<div>2.你的性别div>
    <div>
        <input type="radio" name="sex" id="man" checked="checked">
        
        <label for="man">男label>
    div>
    <div>
        <input type="radio" name="sex" id="woman">
        <label for="woman">女label>
    div>

4.复选框(checked)

<div>
        <div>你的兴趣爱好div>
        <div>
            <input type="checkbox" name="hobby" id="">抽烟
            <input type="checkbox" name="hobby" id="">喝酒
            <input type="checkbox" name="hobby" id="" checked="checked"> 交友
        div>
    div>

    <div>
        <div>你擅长的技术div>
        <input type="checkbox" name="tec" id="html">
        <label for="html">HTMLlabel>
        <input type="checkbox" name="tec" id="css">
        <label for="css">CSSlabel>
        <input type="checkbox" name="tec" id="js">
        <label for="js">jslabel>
    div>

5.上传文件和隐藏字段以及禁用和只读

1.上传文件（file）

图示:

HTML代码:

 <div>
        <div>请截图说明div>
        <div>
            
            <input type="file">
        div>
 div>

2.图片按钮（image）

图示:

HTML代码：

<div>
    <div>图片按钮-用图片代替提交按钮div>
    <form action="">
        
        <input type="image" src="./sulmit.png">
    form>
div>

3.隐藏按钮（hidden）

<div>
       <div>隐藏按钮div>
       <input type="hidden" value="带给后端的个人信息">
 div>

不面向用户显示，主要用来带给后端信息

4.禁用(disabled)和只读(readonly)

图示:

HTML代码:

<div>
    <div>禁用,只读div>
    <div>
        <input type="radio" disabled>不满意input><br>
        <button disabled>注册button><br>
        <input type="text" readonly value="222">
    div>
div>

6.下拉菜单（select）

HTML代码:

<select name="" id="">
        <option value="">奥迪option>
        <option value="">奔驰option>
        <option value="">英菲尼迪option>
        <option value="">宝马option>
        <option value="">比亚迪option>
        <option value="">保时捷option>
select>

默认效果：

<select name="" id="" size="4" multipe value="">

属性介绍:

? size 显示出多个选项 multipe 可使用CTRL选择多个 value 提供给后端需要用的value值

    <select name="" id="" >
        <optgroup label="汽车">
            <option value="">奥迪option>
            <option value="">奔驰option>
            <option value="" selected>英菲尼迪option>
            <option value="">宝马option>
            <option value="">比亚迪option>
            <option value="">保时捷option>
        optgroup>
    select>

分组：

默认选中：selected

7.文本域（textarea）

多行文本输入框

HTML代码：

<h2>请输入你的意见h2>
    
    <textarea name="" id="" cols="30" rows="10">在此输入内容textarea>

CSS代码：

 textarea{
            /* 可以设置宽高 */
            width: 300px;
            height: 200px;
            /* resize属性
                    none == 固定宽高
                    vertical == 可垂直拖动
                    horizontal == 可水平拖动
                    both == 默认
            */
            resize: none;
        }

效果图：

8.字段集（fieldest>legent）

效果图：

HTML代码:

<fieldset>
    <legend>性别legend>
    <input type="radio" name="aa">男
    <br>
    <input type="radio" name="aa">女
fieldset>

可以通过CSS来控制样式

CSS代码：

fieldset{
    border: 1px solid blue;
    width: 400px;
    height: 200px;
}
legend{
    border: 1px solid red;
    text-align: center;
    padding: 10px;
}