HTML 表单标签的使用

原创于 2025-06-08 17:04:32 发布 · 1.3k 阅读

28 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #java #前端

表单标签的方法与使用

**
一、form标签
1.功能：设置表单的提交方式；
2.属性：
（1）action：设置表单提交地址；
（2）method：设置设置表单提交方式；
3.提交方式 get、post的区别;
（1） get提交任务栏可见，post不可见;
（2） get提交不安全，post相对安全；
（3） get提交大小受任务栏限制，post不受限制

<form action="" method="get">
     <input type="text" name="user" value="123456">账号
</form>

二、input标签
表单类型(使用type 设置)
（1） text：文本类型；
（2）password：密码类型；
（3）sumbit：提交按钮，通过value属性修改按钮文字；
（4）reset：重置按钮，通过value修改按钮文字
（5）radio：单选框，必须设置name与value属性，name的值相等，value的值不等；
（6）checkbox 复选框，必须设置name与value属性，name的值相等，value的值不等；
（7）file：上传文件，必须给form标签加上enctype=“multipart/form-data”
（8）image 图片提交 src；
（9）hidden 隐藏域，不会显示在页面上，用于存放不能显示的数据；
（10）button 按钮；
注意：name为表单提交的键，value为表单提交的值；

三、文本域
（1）textarea禁止修改大小 style=“resize:none”；
（2）下拉框select option

body>
    <form action="" method="get">
            <input type="text" name="user" value="123456">账号
            <input type="password" name="pass">密码
            <input type="submit" value="登录"><input type="reset">
            <hr>
            性别<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女
            <br>
            晚饭<input type="checkbox" name="food" value="红烧肉">红烧肉
            <input type="checkbox" name="food" value="回锅肉">回锅肉
            <input type="checkbox" name="food" value="小鲜肉">小鲜肉
            <input type="checkbox" name="food" value="老腊肉">老腊肉
            <hr>
            <input type="file" name="imgs">
            <input type="image" src="emoji/10.gif">
            <input type="hidden">
            <input type="button" value="搜索">
            <!-- 
                文本域 
                <textarea style="resize:none;"></textarea>
             -->
             <textarea name="" id="" style="resize:none;"></textarea>
             <!-- 
             下拉框
              <select id="mySelect">
                    <option>Apple</option>
                    <option>Orange</option>
                    <option>Pineapple</option>
                    <option>Banana</option>
               </select>
             -->
             <select name="lol" id="">
                 <option value="">熬夜波比</option>
                 <option value="">紫皮大蒜波比</option>
                 <option value="">炮形态波比</option>
                 <option value="">机甲波比</option>
                 <option value="">锤形态小炮</option>
             </select>
        </form>
    </body>

四、表单常见属性

<body>
        <!-- 
            设置表单提示信息 placeholder 
            设置禁用与只读 disabled readonly
            区别:
                1.disabled任意表单都可以使用，readonly只有type类型为text，password以及文本域可以使用
                2.disabled不支持提交，readonly支持提交
            设置默认选择
                单复选框默认选择 checked
                下拉框的默认选择 selected
         -->
        <form action="" method="get">
            账号<input type="text" name="user" placeholder="电话/邮箱/小米ID" value="11234" disabled><br>
            密码<input type="password" name="pass" value="22123" readonly><br>
            <input type="submit">
            <hr>
            性别<input type="radio" name="sex" value="1" checked>男                                                <input type="radio" name="sex" value="2">女<br>
            <select name="lol" id="">
                 <option value="">熬夜波比</option>
                 <option value="">紫皮大蒜波比</option>
                 <option value="">炮形态波比</option>
                 <option value="">机甲波比</option>
                 <option value="" selected>锤形态小炮</option>
            </select>
        </form>
    </body>