当前位置：首页 > article >正文

HTML之form表单学习

article 2025/2/8 10:33:03

HTML之form表单学习

<!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>
    <!--
        form 
          action 定义数据的提交地址
            1.url
            2.相对路径
            3.绝对路径
          method 定义数据的提交方式
            GET
                1.参数以键值对的方式放在url后提交  url?key=value&key=value&....
                2.数据直接暴露在地址栏中，相对不安全
                3.地址栏长度有限制，所以提交的数据量不大（与post相比）
                4.地址栏中只能是字符2-4k
            POST
                1.参数默认不放到url后面
                2.数据不会直接暴露在地址栏中，相对安全（F12控制台 网络 负载可见）
                3.数据是单独打包通过请求体发送,提交的数据量比较大
                4.请求体中可以是字符、字节（1010..）数据,即可以提交文件

            相较于POST,GET的效率比较高，但是提高的时间人的感受是感受不到的
            后续还有PUT、DELETE请求方式

          表单项标签 
          一定要定义name属性，该属性用于明确提交时的参数名，即key
          还需要定义value属性，该属性用于明确提交时的实参，即value
            input
                type 输入信息的表单项类型
                    text 普通文本框
                    password 密码框
                    submit 提交按钮
                    reset 重置按钮
                    radio 单选框 多个单选框使用相同的name属性值，就会有互斥效果
                    checkbox 复选框 多个选项选多个
                    hidden 隐藏域，不显示在页面上，提交时会携带;用于提交一些特定数据，但是考虑安全问题或是用户操作问题，不希望数据发生改变
            textarea 文本域 多行文本框

            select 下拉框
                option:选项
            
            file 上传文件
    -->
    post
    <form action="Wecome.html" method="post"><!--默认get-->
        <!--添加表单项标签 用户输入信息的标签-->
        用户名：
        <input type="text" name="username" />
        <br>
        密码：
        <input type="password" name="password"/>
        <br>
        性别：
        <input type="radio" name="gender" value="1" checked = "checked">男<!--属性名等于属性值时，可以只写属性名 checked -->
        <input type="radio" name="gender" value="0">女
        <br>
        爱好：
        <input type="checkbox" name="hobby" value="1">1
        <input type="checkbox"name="hobby" value="2">2
        <input type="checkbox"name="hobby" value="3">3
        <input type="checkbox"name="hobby" value="4">4
        <br>
        <!--用于提交一些特定数据，但是考虑安全问题或是用户操作问题，不希望数据发生改变
               readonly 只读 提交时 携带
               disabled 不可用 提交时 不携带
        -->
        <input type="hidden" name="hidden" value="hidden"/>
        <input type="text" name="hidden1" value="hidden1" readonly/> <!--readonly 表单提交的时候会携带-->
        <input type="text" name="hidden2" value="hidden2" disabled/> <!--disabled 表单提交的时候不会携带-->
        <br>
        个人简介：
        <textarea name="intro" style="width: 300px;height: 100px;">
        </textarea>
        <br>
        籍贯：
        <select>
            <option value="1">北京</option><!--类似于掩码形式，实际提交value值，若没有value则显示值即为value值-->
            <option value="2">天津</option>
            <option value="3">河北</option>
            <option value="0" selected>选择</option>
        </select>
        <br>
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
        选择头像：
        <input type="file" name="file"/>
    </form>

    get：实例将上述的内容复制下来然后method改为get即可测试

</body>
</html>