首页 > 其他分享 >H5中的表单标签

H5中的表单标签

时间:2024-06-20 22:00:06浏览次数:12  
标签:例如 标签 表单 单选 按钮 H5 属性

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>

标签:例如,标签,表单,单选,按钮,H5,属性
From: https://blog.csdn.net/qq_63536538/article/details/139842887

相关文章

  • MGM320H5S LEC0101
    MGM320H5SLEC0101Financial Statement Analysis and InterpretationCourseOutline-Winter 2024CourseDescriptionThiscoursewillprovideanunderstandingof financialreports,andtheirusefor investment andmanagement decisions. Cases will be......
  • SVG <pattern> 标签的用法和应用场景
    通过使用<pattern>标签,可以在SVG图像内部定义可重复使用的任意图案。这些图案可以通过fill属性或stroke属性进行引用。使用场景例如我们要在<svg>中绘制大量的圆点点,可以通过重复使用<circle>标签来实现。<svgwidth="100"height="100"xmlns="http://www.......
  • SVG <pattern> 标签的用法和应用场景
    通过使用<pattern>标签,可以在SVG图像内部定义可重复使用的任意图案。这些图案可以通过fill属性或stroke属性进行引用。使用场景例如我们要在<svg>中绘制大量的圆点点,可以通过重复使用<circle>标签来实现。<svgwidth="100"height="100"xmlns="http://www.w3.org......
  • H5移动端加载预览pdf文件——demo
    前言:正常情况下需要在HTML中嵌入本地docx或pdf文件时,我们会有以下解决办法:1.使用<iframe>标签2.使用<embed>标签3.使用<object>标签4.使用第三方库(如PDF.js)当实际操作时,会发现前三种方式在pc端支持,但在移动端不支持,因为这些标签在移动端浏览器中的支持并不统一。为了兼容移......
  • js 如何解析带有html标签的内容
    在JavaScript中解析带有HTML标签的内容,通常是为了提取信息或转换HTML结构为可操作的对象。以下几种方式可以实现:1.使用DOMParser        如果想将HTML字符串解析成DOM节点以便进一步操作(比如查询、修改等),可以使用DOMParser。这是一个非常强大的工具,特别是在处理复......
  • 快速自定义表单开发受欢迎的几个优势
    为了满足业务需求,低代码技术平台带着更理想的优势特点,广泛用于各中大型企业中,是助力企业实现提质增效、提升开发效率的有力武器。那么,您知道快速自定义表单开发的优势体现在哪里吗?为了帮助大家了解这些详情,接下来将会为大家介绍低代码技术平台及快速自定义表单开发的优势,希望能给......
  • Naive组件-表单的验证 只验证表单的部分规则 单项校验某个表单项
    表单的规则可以只写在表单项上表单校验可以多个判断<n-form-itempath="data":label="$t('Date')":rule="dataRule"><n-select:disabled="props.mode==='编辑'||(props.mode==='添加'&&dialog......
  • 可视化表单拖拽生成器优势多 助力流程化办公!
    当前,很多企业需要实现流程化办公,进入数字化转型时期。要想实现这一目标,就需要借助更优质的平台产品。低代码技术平台是得到企业喜爱的发展平台,拥有可视化操作、灵活、高效、更可靠等优势特点,在推动企业实现流程化办公的过程中具有重要的应用价值。一起来看看可视化表单拖拽生成器......
  • 【JavaScript脚本宇宙】终极对决:JavaScript表单库比较指南
    简化你的表单开发:六种流行JavaScript库的深入比较前言在现代网页开发中,表单处理是一个常见的任务。为了简化这个过程并提供更好的用户体验,许多开发人员使用JavaScript库来管理表单数据、验证和提交。本文将介绍六种流行的JavaScript表单库,它们具有不同的功能和适用场景。......
  • vue3标签模板上的ref类型注解
    子组件<scriptsetuplang="ts">import{ref,defineExpose}from'vue';constnum=ref<number>(10)defineExpose({num,//把值暴露出去,父级可以通过ref获取})</script><template><h1>我是组件</h1></template&g......