HTML5基础知识点总结（五）---表单

表单

1、文本输入框 input

基本格式：
<input type=" ">
较常用的类型有text(文本)、password(密码)、radio(单选框)、checkbox(复选框)等。
实例如下：

    账号：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    男：<input type="radio" name="sex">女：<input type="radio" name="sex">
    <br>
    爱好：<input type="checkbox">吃 <input type="checkbox">喝

结果：

注意：使用单选框时两个选项的name属性要相同。
小拓展：
（1）单选框与多选框可以设置默认值，只需在input标签内加入checked="checked"或checked即可，单选框只能设置一个默认值，如果设置多个则只会执行后一个。多选框可以设置多个。
（2） 如果我们想实现：在选择单选框或多选框选项时，点击文字也可以实现选择的功能，以单选框为例，代码如下：

 <!-- 男：<input type="radio" name="sex">女：<input type="radio" name="sex"> -->
    <label for="man">男：</label> <input id="man" type="radio" name="sex" checked="checked">
    <label for="woman">女：</label><input id="woman" type="radio" name="sex">

注：label for后的值要和input标签的id的值保持一致。
（3）几种状态设置，hidden–隐藏，即只显示在代码中，在页面中不显示；readonly–只读，即只显示，不允许修改；disabled–禁用，即将按键变成灰色，不允许点击。

2、下拉选择框 select

代码实例：

    生日：
    <select name="" id="">
        <option value="">公历</option>
        <option value="">日历</option>
    </select>
    <select name="" id="">
        <option value="">2020</option>
        <option value="">2021</option>
        <option value="">2022</option>
    </select>年
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>月
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>日

结果：

小拓展：
（1）要实现在没有点击下拉框时显示"请选择"字样，点击时选项不显示该字样，可在每个选项最上方写上：

<option value="" disabled selected hidden>请选择</option>

结果如图：

（2）下拉选项框显示在框内的默认值为选项第一行的值，要想更改的话只需要在希望显示的值的input标签内加上selected=“selected”即可。

3.多行文本域

表单中有自带的多行文本域textarea
格式如下：

  <br>
    意见：<br>
    <!-- cols为横向字符最大显示数 rows为纵向字符最大显示数 -->
    <textarea name="" id="" cols="30" rows="10">

    </textarea>

结果：

输入框右下角可以放大和缩小

4、提交按钮

有两种格式：
1.提交
2.
结果：