HTML 表单 form

最新推荐文章于 2025-04-29 14:32:47 发布

周巴帝

最新推荐文章于 2025-04-29 14:32:47 发布

阅读量370

点赞数

分类专栏： web 文章标签： html 服务器前端

本文链接：https://blog.csdn.net/Hello_super/article/details/122868390

版权

web 专栏收录该内容

17 篇文章

订阅专栏

HTML 表单 form

1、表单的简介

在现实生活中表单用于提交数据，在网页中也可以使用表单来提交数据，即将本地的数据提交到服务器中。使用form标签来创建一个表单。

form的属性如下：

action，表单要提交的服务器地址；
method，指定表单的提交方式，常见可选值，get、post；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="#" method='post'>
        <!-- 注意在input标签中，如果是输入框，则必须要指定name属性，用于后台服务器获取数据 -->
        文本框 <input type="text" name="username"><br>
        文本框 <input type="password" name="password" ><br>
        <!-- 这里的name必须一样，否则不能实现单选。 -->
        <!-- 单选按钮必须指定一个value值，用于最终向服务器提交的值。 -->
        <!-- checked 可以将单选按钮设置为默认选择状态。 -->
        单选按钮 <input type="radio" name="gender" value="1">
        <input type="radio" name="gender" value="2"><br>

        <!-- 多选框 -->
        多选框 <input type="checkbox" name="hobby" value="basketball">
        <input type="checkbox" name="hobby" value="music">
        <input type="checkbox" name="hobby" value="song">
        <input type="checkbox" name="hobby" value="code"><br>

        <!-- 下拉列表 -->
        <select name="location" id="location">
            <!-- 这里可以给option添加selected，将某一个值默认选中。 -->
            <option value="beijign">北京</option>
            <option value="shanghai">上海</option>
            <option value="hangzhou">杭州</option>
            <option value="shenzhen">深圳</option>
        </select><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

2、表单常用属性

input标签中的常见属性如下：

autocomplete=“off”，关闭自动补全；
readonly，将表单设置为只读，数据会提交；
disabled，将表单设置为禁用，数据不会提交；
autofocus，设置表单项自动获取焦点，即刷新页面时，自动跳到对应的输入框；
placeholder，在文本框中设置提示语；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单补充</title>
</head>
<body>
    <form action="#">
        <input type="text" name="username" id="username" placeholder="用户名"><br>
        <input type="password" name="password" id="password" placeholder="密码"><br>

        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通按钮 -->
        <input type="button" value="按钮">

        <br><br>
        <!-- 与input的提交按钮一样 -->
        <button type="submit">提交</button>
        <!-- 与input的重置按钮一样 -->
        <button type="reset">重置</button>
        <button type="buttom">按钮</button>
    </form>
</body>
</html>