1 表单属性设置

标签表示表单标签，定义整体的表单区域
action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

2 表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

3 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 把数据提交给web服务器使用表单标签 -->
    <form action="https://baidu.com" method="POST">
        <p>
            <!-- for:鼠标单击label时给指定id的标签设置焦点 -->
            <label for="name">用户名:</label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label>密码:</label>
            <input type="password" name="password">
        </p>
        <p>
            <label>性别:</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <label>爱好:</label>
            <input type="checkbox" name="hobby" value="吃饭">吃饭
            <input type="checkbox" name="hobby" value="睡觉">睡觉
            <input type="checkbox" name="hobby" value="打豆豆">打豆豆
        </p>
        <p>
            <label>照片:</label>
            <input type="file" name="pic">
        </p>
        <p>
            <label>个人描述:</label>
            <textarea name="desc"></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select name="place">
                <option value="1">北京</option>
                <option value="2">河北</option>
                <option value="3">深圳</option>
                <option value="4">云南</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
    </form>
</body>
</html>

前端

表单提交

1 表单属性设置

2 表单元素属性设置

3 示例代码

4 效果

(1) 若以GET方式提交

(2) 若以POST方式提交