首页 前端知识 HTML 表单和输入

HTML 表单和输入

2025-02-26 11:02:32 前端知识 前端哥 727 782 我要收藏

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子:

  • <form> 元素用于创建表单,action 属性定义了表单数据提交的目标 URL,method 属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。
  • <label> 元素用于为表单元素添加标签,提高可访问性。
  • <input> 元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型,id 属性用于关联 <label> 元素,name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表,而 <option> 元素用于定义下拉列表中的选项。

实例

<form action="/" method="post"><form action="/" method="post"></form>
    <!-- 文本输入框 --> “文本输入框”翻译成Chinese为“文本输入框”。 “”翻译成Chinese为“”。
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br> <br />

    <!-- 单选按钮 --> 
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked><input type="radio" id="male" name="gender" value="male" checked />
    <label for="male"></label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female"></label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/21541.html
标签
评论
发布的文章

库制作与原理

2025-02-26 11:02:28

仿12306项目(1)

2025-02-26 11:02:27

2.25 链表 2 新建链表 82

2025-02-26 11:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!