HTML5：Form表单中10个常用元素

水星の圈圈

已于 2024-09-11 19:59:53 修改

阅读量536

点赞数 14

分类专栏：前端学习文章标签： html 前端 html5

于 2024-09-10 22:09:17 首次发布

本文链接：https://blog.csdn.net/Noctiflorous_s/article/details/142110364

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

Form表单常用元素
- 1. 显示效果
- 2. 代码

Form表单常用元素

1. 显示效果

在这里插入图片描述

2. 代码

<!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="https://www.runoob.com/try/demo_source/demo-form.php" method="post/get">
      1.这是一个文本框：<input
        type="text"
        name="email"
        size="40"
        maxlength="50"
      />
      <br />
      2.这是一个密码框：<input type="password" />
      <br />
      3.这是一个复选框：<input type="checkbox" checked="checked" />
      <br />
      4.这是一个单选框：<input type="radio" checked="checked" />
      <br />
      5.这是一个提交键：<input type="submit" value="Send" />
      <br />
      6.这是一个复位键：<input type="reset" />
      <br />
      7.这是一个隐藏字段：<input type="hidden" />
      <br />
      8.这是一个下拉选择框：<select title="水果">
        <option>苹果</option>
        <option selected="selected">香蕉</option>
        <option>樱桃</option>
      </select>

    </form>
    <!-- <datalist> 标签规定了 <input> 元素可能的选项列表。 -->
      <form action="https://www.runoob.com/try/demo_source/demo-form.php" method="get">
      9.这是一个带有预设的选项列表，在输入数据时会自动与选项列表项匹配：
      <br>
      <input list="browsers" name="browser">
      <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      <input type="submit">
      <br>
      10.这是一个可调文本输入框：
      <br />
      <textarea name="comment" rows="60" cols="20"></textarea>
  </body>
</html>