2021-07-14 下拉菜单

1.下拉菜单选项

<!-- 窗体选项栏 -->
    <label for="box">选择位置</label>
    <!-- 设置size="3" 可以一次显示多条下拉菜单-->
    <!-- 设置为multiple 可以同时选中多条数据，默认会显示多条数据 -->
    <select  name="location"  id="box" autofocus >
        <!-- disabled 可以禁用该下拉项 -->
        <option value="" disabled>广东</option>
        <option value="">广西</option>
        <option value="">四川</option>
        <!-- selected 让下拉项默认处于选中状态 -->
        <option value="" selected>重庆</option>
    </select>

效果如下图👇👇👇

2.下拉分组菜单select+optgroup

通过 optgroup标签把相关的选项组合在一起：

<select>
        <!-- label='分组名称' -->
        <optgroup label="早餐">
            <!-- label='也用于表示选项含义的文本' -->
            <option value="" label="豆浆"></option> （这里使用了label标签，使得选项的默认值为豆浆，相当于单选框的selected和复选框的checked）
            <option value="">油条</option>
            <option value="">小笼包</option>
            <option value="">糯米鸡</option>
            <option value="">鸡蛋</option>
        </optgroup>

        <optgroup label="午餐">
            <option value="">螺蛳粉</option>
            <option value="">河粉</option>
            <option value="">炒米粉</option>
            <option value="">炒河粉</option>
            <option value="">炒面</option>
        </optgroup>
        
        <optgroup label="饮料">
            <option value="">可乐</option>
            <option value="">雪碧</option>
            <option value="">芬达</option>
            <option value="">咖啡</option>
        </optgroup>
    </select>

效果如下图👇👇👇

3.form和下拉菜单

<h3>form 和 下拉菜单</h3>
    <form action="https://v1.hitokoto.cn" method="get"> （规定当提交表单时向何处发送表单数据）
        <label for="type">句子类型</label>
        <select name="c" id="type">
            <option value="a">动画</option>
            <option value="b">漫画</option>
            <option value="c">游戏</option>
            <option value="d">文学</option>
            <option value="e">原创</option>
            <option value="f">来自网络</option>
            <option value="g">其他</option>
            <option value="h">影视</option>
            <option value="i">诗词</option>
            <option value="j">网易云</option>
            <option value="k">哲学</option>
            <option value="l">抖机灵</option>
        </select>
        <input type="submit">
    </form>

效果如下图👇👇👇

4.form标签与fieldset标签

<!-- 半包围框框+标题 -->
   <fieldset>
        <legend>登录</legend>
        <label for="uname">用户名</label>
        <input type="text" id="uname">
        <br>
        <label for="upass">密码</label>
        <input type="text" id="upass">
    </fieldset>