HTML中与表单有关的知识点(第二部分）

这一部分主要讲文本域，下拉菜单,文件以及按钮

---

下拉菜单

select嵌套option，select是下拉菜单整体，option是里面的每一项

 <select>
        <option>北京</option>
        <option>上海</option>
        <option>广东</option>
        <option>河南</option>
 </select>

下拉菜单的默认选中如何实现？
和之前单选，多选的做法差不多也是加一个属性

 <select>
        <option>北京</option>
        <option>上海</option>
        <option>广东</option>
        <option selected>河南</option>
 </select>

---

文本域

    工作描述:
    <br>
   	<textarea></textarea>

文本域刚创建的时候会有属性

 <textarea name="" id="" cols="30" rows="10"></textarea>

这些cols，rows先不用管，以后会用css来设计外观

按钮

<button type=" ">按钮</button>
<button type="button"></button>
<button type="reset"></button>
<button type="submit"></button>

type属性：
submit: 提交按钮，点击可以提交数据到后台(默认功能)
reset:重置按钮，点击后将表单控件恢复默认值
button:普通按钮，默认没有功能，一般配合JavaScript 使用

因为现在还没有后台，就先看看样子
重新填写按钮的写法：
现在的按钮仅仅是一个按钮而已，没有任何功能，如何实现？
加一个form相当于一个作用域，把要清空的区域放在里面

完整代码如下：

<h1>注册信息</h1>
<form action="">
    <h2>个人信息</h2>
    <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    确认密码：<input type="password" placeholder="请输入确认密码">
    <br><br>
    性别：
    <label><input type="radio" name="gender">男</label>
    <label><input type="radio" name="gender" checked>女</label>
    <br>
    
    <label>居住城市：</label> 
    <select>
        <option>北京</option>
        <option value="">上海</option>
        <option value="">广东</option>
        <option value="">河南</option>
    </select>
    
    <h2>教育经历</h2>
    <label>最高学历:</label> 
        <select name="" id="">
            <option value="">博士</option>
            <option value="">硕士</option>
            <option value="">本科</option>
        </select>
  
        <br>
        学校名称：<input type="text">
        <br><br>
        所学专业：<input type="text">
        <br><br>
        在校时间：
        <select name="" id="">
            <option value="">2015</option>
            <option value="">2016</option>
            <option value="">2017</option>
            <option value="">2018</option>
            <option value="">2019</option>
            <option value="">2020</option>
        </select>
        --
        <select name="" id="">
            <option value="">2020</option>
            <option value="">2019</option>
            <option value="">2018</option>
            <option value="">2017</option>
            <option value="">2016</option>
        </select>
        
    <h2>工作经历</h2>
    公司名称：<input type="text">
    <br>
    工作描述:
    <br>
    <textarea></textarea>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br>
    
    <input type="checkbox">已同意以下协议:
    <br>
    <ul>
        <li><a href="../day 1/微信图片_20230411133230.jpg" target="_blank">《用户服务协议》</a></li>
        <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
</form>

文件

上传文件: <input type="file"> 
<br>
		<input type="file" multiple>

效果如图:

不加multiple就是只能上传一个