首页 > 其他分享 >Html - 表单form

Html - 表单form

时间:2023-01-03 17:56:16浏览次数:35  
标签:控件 定义 form 表单 Html type 输入 属性

1.form属性

<form action="请求URL" method="请求方式" name="表单域的名称 类似于注释">

</form>

2.表单 input

<form action="请求URL" method="请求方式" name="表单域的名称 类似于注释">
  <!--文本框-->
  用户名称:<input type="text" name="username">
  <!--密码框-->
  用户密码:<input type="password" name="password">
  <!--单选按钮-->
  男:<input type="radio" name="sex" value="男" checked>
  女:<input type="radio" name="sex" value="女">
  <!--多选按钮-->
  篮球 <input type="checkbox" name="loves" value="篮球" checked>
  跑步 <input type="checkbox" name="loves" value="跑步">
  游泳 <input type="checkbox" name="loves" value="游泳">
</form>

 

type的值:

button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox 定义复选框。
colorNew 定义拾色器。
dateNew 定义 date 控件(包括年、月、日,不包括时间)。
datetimeNew 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-localNew 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
emailNew 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
monthNew 定义 month 和 year 控件(不带时区)。
numberNew 定义用于输入数字的字段。
password 定义密码字段(字段中的字符会被遮蔽)。
radio 定义单选按钮。
rangeNew 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset 定义重置按钮(重置所有的表单值为默认值)。
searchNew 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
telNew 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
timeNew 定义用于输入时间的控件(不带时区)。
urlNew 定义用于输入 URL 的字段。
weekNew 定义 week 和 year 控件(不带时区)。

其他属性:

value 规定输入字段的初始值
readonly 属性规定输入字段为只读(不能修改)
disabled

规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

size 规定输入字段的尺寸(以字符计)
maxlength 规定输入字段允许的最大长度
autocomplete

规定表单或输入字段是否应该自动完成。

当自动完成开启,浏览器会基于用户之前的输入值自动填写值

novalidate 属性属于 <form> 属性 如果设置,则 novalidate 规定在提交表单时不对表单数据进行验证
autofocus

属性是布尔属性。

如果设置,则规定当页面加载时 <input> 元素应该自动获得焦点。

form

规定 <input> 元素所属的一个或多个表单

如需引用一个以上的表单,请使用空格分隔的表单 id 列表

formaction

规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"。

formmethod

定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性。

formmethod 属性适用于 type="submit" 以及 type="image"。

formnovalidate

novalidate 属性是布尔属性。

如果设置,则规定在提交表单时不对 <input> 元素进行验证。

formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"。

formenctype

规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 的表单)。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

formenctype 属性适用于 type="submit" 以及 type="image"。

 formtarget  

规定的名称或关键词指示提交表单后在何处显示接收到的响应。

formtarget 属性会覆盖 <form> 元素的 target 属性。

formtarget 属性可与 type="submit" 和 type="image" 使用。

 height 和 width  

规定 <input> 元素的高度和宽度。

height 和 width 属性仅用于 <input type="image">。

注释:请始终规定图像的尺寸。如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁。

 min 和 max  

规定 <input> 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。

multiple

是布尔属性。

如果设置,则规定允许用户在 <input> 元素中输入一个以上的值。

multiple 属性适用于以下输入类型:email 和 file。

pattern

规定用于检查 <input> 元素值的正则表达式。

pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。

placeholder

规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。

required

是布尔属性。

如果设置,则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

step

规定 <input> 元素的合法数字间隔。

示例:如果 step="3",则合法数字应该是 -3、0、3、6、等等。

提示:step 属性可与 max 以及 min 属性一同使用,来创建合法值的范围。

step 属性适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。

标签:控件,定义,form,表单,Html,type,输入,属性
From: https://www.cnblogs.com/ErenYeager/p/17023011.html

相关文章

  • HTML一键打包APK工具最新版1.9.1更新(附下载地址)
    HMTL网址打包APK,可以把本地HTML项目,Egret游戏,网页游戏,或者网站打包为一个安卓应用APK文件,无需编写任何代码,也无需配置安卓开发环境,支持在最新的安卓设备上安装运行。 H......
  • Html - 标题标签,段落标签,换行标签,文本格式化标签,盒子标签div,span,图像标签,超链接标签,表
    1.标题标签<h1~h6></h1~h6> 2.段落标签与换行标签<p>我是一个段落<br>我是换行标签</p><p>我是一条段落1</p><br><p>我是一条段落2</p> 3.文本格式化标......
  • 开源web自定义表单好用吗?
    在大数据时代,想要提高办公协作效率是每一家企业的追求目标。采用开源web自定义表单比传统的表单的效率更高,是当今不少企业一直在追寻的合作伙伴。那么,开源web自定义表单好......
  • .net可视化表单设计工具
    在很多软件系统中,表单开发都是很重要的一个部分。在表单开发中,往往会遇到重复开发的问题,例如在页面搭建系统中,除了组件本身的逻辑,配置组件数据的表单通常也需要开发人员重......
  • terraform环境配置
    官网​​https://www.terraform.io/​​下载地址​​https://developer.hashicorp.com/terraform/downloads​​环境配置将下载的二进制放在此目录下C:\ProgramFiles\terra......
  • vue文件跳转到html文件写法
    前言在同一个项目中,vue文件跳转到html文件中详解我的项目中html页面统一放到public文件夹内了,如图postalPay.html文件  现在要从xxx.vue文件中跳转到postalPay.ht......
  • Winform帮助文档(C#打开chm定位到特定页面)
    下面比较啰嗦,只一句即可:Help.ShowHelp(null,"C:\help.hcm",HelpNavigator.Topic,"index.htm")方法一:Process.Start()在没有更多需求的情况下,用这种方法可以打开chm文......
  • .net可视化表单设计工具
    在很多软件系统中,表单开发都是很重要的一个部分。在表单开发中,往往会遇到重复开发的问题,例如在页面搭建系统中,除了组件本身的逻辑,配置组件数据的表单通常也需要开发人员重复......
  • 实现可移动悬浮按钮(微信小程序/H5移动端html)
    微信小程序实现方案:我们可以利用微信小程序的内置组件轻松实现!1.将整个屏幕用movable-area组件覆盖,2.在movable-area内部添加一个movable-view实现自由滑动。3.重点:CSS属......
  • html2canvas页面生成截图
    什么是html2canvs?html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。它的屏幕截图是基于 DOM 的,因此可能不会100%精确到真实的表......