H5中的表单标签

呦嘿_blk

于 2024-06-20 21:57:34 发布

阅读量381

点赞数 8

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

本文链接：https://blog.csdn.net/qq_63536538/article/details/139842887

版权

H5标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.form标签

form标签构成表单框架，一些按钮只有在form标签内，才会显示出该标签的用途效果。

例如：

网址标签

<input type="url">

邮箱标签

<input type="email" placeholder="请输入邮箱">

2.表单中的控件

主要由input标签加上type属性的更改来实现。

text值

<input type="text" placeholder="请输入账号">

password值

<input type="password" placeholder="请输入密码" required>

email(邮箱)值

<input type="email" placeholder="请输入邮箱">

单选按钮

单选按钮的type属性为：“radio”。为了实现单选的效果，要与"name"属性一起使用。例如：

<label>
        <input type="radio" name="gender" value="男">男
      </label>
      <label>
        <input type="radio" name="gender" value="女">女
      </label>

多选按钮

多选按钮的type属性为：“checkbox”。例如：

爱好：
      <label><input type="checkbox" value="打球">打球</label>
      <label><input type="checkbox" value="跑步">跑步</label>
      <label><input type="checkbox" value="玩游戏">玩游戏</label>
      <label><input type="checkbox" value="唱歌">唱歌</label>

textarea值

该标签是一个文本域。例如：

<textarea cols="50" rows="10"></textarea>

date值

实现选择日期的功能。例如：

<input type="date">

time值

实现选择时间的功能。例如：

<input type="time">

range值

可以实现拖拽条的功能。其中“max”、“min”是控制其最大最小的值。例如：

<input type="range" min="10" max="20">

search值

可以实现出现搜索框的样子。例如：

<input type="search" list="sear-list">

datalist值

用datalist可以实现智能感应的效果。比如配合上述的search值，可以实现在搜索框中输入文字，在搜索框下出现相应关键字。当然，相应关键字要求我们直接写入对应列表中。例如：

搜索：
      <input type="search" list="sear-list">
      <datalist id="sear-list">
        <option value="前端">
        <option value="html">
        <option value="javascript">
        <option value="大前端">
      </datalist>

其中，"list"的值要与“id”的值相匹配，禁止两者写入不符。'option '中的’value‘的值就是我们需要提前写好的值。

3.三个按钮

普通按钮

属性为button。例如：

<button>普通按钮</button>

提交按钮

属性为"submit"。点击该按钮，表单提交。例如：

<input type="submit" value="提交表单">

重置按钮

属性为“reset”。点击该按钮，表单重置。例如：

<input type="reset" value="重置表单">

4.小demo

源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单</title>
</head>
<body>
  <form action="#" method="post">
    <p>
      账号：
      <input type="text" placeholder="请输入账号">
    </p>
    <p>
      密码：
      <input type="password" placeholder="请输入密码" required>
    </p>
    <p>
      邮箱：
      <input type="email" placeholder="请输入邮箱">
    </p>
    <p>
      性别:
      <label>
        <input type="radio" name="gender" value="男">男
      </label>
      <label>
        <input type="radio" name="gender" value="女">女
      </label>
    </p>
    <p>
      省份：
      <select name="" id="">
        <option value="河南">河南</option>
        <option value="河北">河北</option>
        <option value="广东">广东</option>
        <option value="广西">广西</option>
      </select>
    </p>
    <p>
      爱好：
      <label><input type="checkbox" value="打球">打球</label>
      <label><input type="checkbox" value="跑步">跑步</label>
      <label><input type="checkbox" value="玩游戏">玩游戏</label>
      <label><input type="checkbox" value="唱歌">唱歌</label>
    </p>
    <p>
      其他：
      <textarea cols="50" rows="10"></textarea>
    </p>
    <p>
      日期：
      <input type="date">
    </p>
    <p>
      时间：
      <input type="time">
    </p>
    <p>
      拖拽条：
      <input type="range" min="10" max="20">
    </p>
    <p>
      搜索：
      <input type="search" list="sear-list">
      <datalist id="sear-list">
        <option value="前端">
        <option value="html">
        <option value="javascript">
        <option value="大前端">
      </datalist>
    </p>
    <p>
      网址：
      <input type="url">
    </p>
    <button>普通按钮</button>
    <input type="submit" value="提交表单">
    <input type="reset" value="重置表单">
  </form>
</body>
</html>