HTML之表单

知识点

  1. 在表单中，针对每一个input都要设置一个属性值：name，它是提交表单时的键值

  2. 针对input中”radio”和”checkbox”，除了设置name，还需要设置属性值：value，用于标识选择的是什么数据

  3. 除了提交按钮外，其它input中的value属性都是用来定义该表单元素的值。name属性标识表单元素的名称，此名称是提交数据时的键名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    <!--
    1. action属性：定义表单数据提交地址
    2. method属性：定义表单提交的方式，一般有“get”方式和“post”方式
    -->

    <form action="http://www..." method="get">
        <p>
            <!--
                1. <label>标签：为表单元素定义文字标注
                2. 通过for、id方式可以设置出点击文字即激活输入框的功能
            -->
            <label for="name">姓名：</label>
            <!--<input标签：定义通用的表单元素-->
            <!--type="text"：定义单行文本输入框-->
            <input type="text" name="username" id="name" />
        </p>
        <p>
            <label>密码：</label>
            <!--type="password"：定义密码输入框-->
            <input type="password" name="password" />
        </p>
        <p>
            <label>性别：</label>
            <!--type="radio"：定义单选框。
                定义时还需要设定value值
                -->
            <input type="radio" name="gender" value="0" /> 男
            <input type="radio" name="gender" value="1" /> 女
        </p>
        <p>
            <label>爱好：</label>
            <!--type="checkbox"：定义复选框，定义时还需要设置复选框-->
            <input type="checkbox" name="like" value="sing" /> 唱歌
            <input type="checkbox" name="like" value="run" /> 跑步
            <input type="checkbox" name="like" value="swiming" /> 游泳
        </p>
        <p>
            <label>照片：</label>
            <!--type="file"：定义上传文件-->
            <input type="file" name="person_pic">
        </p>
        <p>
            <label>个人描述：</label>
            <!--textarea：定义多行文本输入框-->
            <textarea name="about"></textarea>
        </p>
        <p>
            <label>籍贯：</label>
            <!--select-option组合：定义下拉选项框-->
            <select name="site">
                <!--option中需要定义value值信息-->
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
            </select>
        </p>
        <p>
            <!--type="submit"：定义提交按钮，提交按钮上面的文字通过value属性来设定-->
            <input type="submit" name="" value="提交">
            <!-- input类型为submit定义提交按钮  
                 还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
                 <input type="image" src="xxx.gif">
            -->
            <!--type="reset"：定义重置表单-->
            <input type="reset" name="" value="重置">
            <!--type="button"：定义一个普通按钮-->
            <input type="button" name="" value="普通按钮">
            <!--type="hidden"：定义一个隐藏的表单域-->
            <input type="hidden" name="" value="隐藏">
        </p>
    </form>