form基础表单总结
一、form表单用户搜集用户输入内容。
form表单的相关属性:
1.action:此属性表示提交表单时要执行的操作,通常是将表单数据提交到服务器处理表单数据的文件脚本中。
2.target:此属性表示在提交表单之后,服务器相应数据在何处显示。
默认值是_self,表示在当前窗口显示,值_blank表示在新窗口中显示。
3.method:此属性表示提交表单时要使用的HTTP方法。
可选值有get和post两种,默认值是get。
get与post的区别:
get | post |
表单数据以键值对的方式追加到URL中 | 表单数据不会追加到URL,回附加到HTTP请求的正文中 |
URL的长度受到限制(2048个字符) | 没有限制 |
用于提交非敏感数据 | 可提交敏感数据(如密码) |
4.autocomplete:此属性表示是否开启表单自动补全,如果开启则浏览器会根据之前用户输入的值自动补全值。默认是开启的,可选值值有on(开)、off(关)。
5.novalidate:此属性表示表单提交时是否不进行表单验证,如果设置,则表示不进行表单验证。
默认是进行表单验证的。
<form target="_self" method="get" autocomplete="on">用户名:<br><input type="email"><input type="submit">
</form>
email在提交时会进行验证邮箱格式是否正确,如果不正确,则不会进行提交并给予提示。
如果设置了novalidate属性且为真,则不会进行表单验证。
<form target="_self" method="get" autocomplete="on" novalidate="true">用户名:<br><input type="email"><input type="submit">
</form>
二、表单的相关元素
1.ladel标签
ladel标签改进了对鼠标用户的可用性,它能够使鼠标点击标签的文本触发输入框获取焦点。也能够使按钮触发点击事件。
其中label标签的for属性指定的字段要与相应input标签的id字段相同,才能生效。也可以不设置for和id字段,则包裹内生效。
总之:如果label标签没有包裹input标签,则必须设置for和id对应字段才能生效;如果label标签包裹了input标签,则可以不设置for和id字段也会生效(注意是都不设置)。
<form target="_self" method="get" autocomplete="on" novalidate="true"><label>用户名(不包裹,不使用for和id)</label><input type="text"><br><label for="myInput1">用户名(不包裹,使用for和id)</label><input type="text" id="myInput1"><br><label>用户名(包裹,不使用for和id)<input type="text"></label><br><label for="myInput2">用户名(包裹,使用for和id)<input type="text" id="myInput2"></label>
</form>
2.input标签
input元素可以通过设置不同的type属性值,显示不同的状态。input标签通常要设置name字段以指定向服务器提交字段时的名称、设置value字段表示提交值。
type值 | 作用 | 相关属性介绍 |
text | 普通文本输入框 | 设置name属性表示提交数据名称;value表示输入初始值 |
password | 密码输入框,默认输入值不可见,*号代替 | 设置name属性表示提交数据名称;value表示输入初始值 |
submit | 定义提交form表单提交按钮 | 设置value属性表示按钮显示名称,不设置默认显示"submit" |
radio | 单选按钮 | 设置name和value属性表示相关提交数据,并且同一name属性值表示为一组内容;设置checked属性表示直接选中 |
checkbox | 多选按钮 | 设置name、value、checked属性作用同radio |
button | 使用input定义普通按钮 | 设置value表示按钮显示名称 |
<form target="_self" method="get" autocomplete="on" novalidate="true"><label for="myInput1">用户名:<input type="text" id="myInput1" value="张三"></label><br><label for="myInput2">密码:<input type="password" id="myInput2" value="123456789"></label><br><label>性别:男:<input type="radio" name="radio1" value="男">女:<input type="radio" name="radio1" value="女"></label><br><label>爱好:看剧:<input type="checkbox" value="看剧" name="hobby">追番:<input type="checkbox" value="追番" name="hobby">打游戏:<input type="checkbox" value="打游戏" name="hobby">内卷:<input type="checkbox" checked value="内卷" name="hobby"></label><br><input class="btn" type="button" value="我是按钮"><br><input type="submit" value="文本显示(提交)">
</form>
HTML5新增的输入类型:
类型 | 作用 | 展示 |
number | 限制输入为数字才能生效 |
![]() |
限制输入为邮箱才能生效 |
![]() |
|
color | 获取焦点后会弹出颜色选择器 |
![]() |
date | 日期选择器会出现在输入框中 |
![]() |
range | 能够显示滑块字段 |
![]() |
month | 日期选择器(月份) |
![]() |
week | 日期选择器(周) |
![]() |
time | 时间选择器 |
![]() |
datetime | 时间选择器 | 测试的时候没有生效 |
datatime-clocle | 日期选择器 |
![]() |
tel | 电话输入 |
![]() |
url | 在提交时能够自动验证 url 字段。 |
![]() |
search | 用于搜索字段(搜索字段的表现类似常规文本字段) |
input的输入限制属性:
属性 | 描述 |
---|---|
disabled | 规定输入字段应该被禁用。 |
max | 规定输入字段的最大值。 |
maxlength | 规定输入字段的最大字符数。 |
min | 规定输入字段的最小值。 |
pattern | 规定通过其检查输入值的正则表达式。 |
readonly | 规定输入字段为只读(无法修改)。 |
required | 规定输入字段是必需的(必需填写)。 |
size | 规定输入字段的宽度(以字符计)。 |
step | 规定输入字段的合法数字间隔。 |
value | 规定输入字段的默认值。 |
3.select标签与option标签
<select>用于包裹<option>生成下拉选择框。name属性指定提交名称,id可以配合<label>的for属性实现鼠标点击优化。
4.fieldset标签与legend标签
<fieldset>可用于数据分组,<legend>可以设置标题。使用fieldset分组的表单将会显示区别于部分组的样式,如 被边框包裹。
5.textarea标签
<textarea>表示一个多行纯文本编辑器,可以用于用户输入。可以设置id属性与<label>实现鼠标点击优化,cols和rows属性可以设置编辑器显示大小。
<form><fieldset><legend>填写用户信息</legend><label for="user">用户名:</label><input type="text" id="user"><br><label for="password">密码:</label><input type="text"></fieldset><label for="mySelect">我的select</label><br><select id="mySelect" name="number"><option value="1">1</option><option value="2">2</option><option value="3" selected>3</option></select><br><label for="myText">我的textarea</label><br><textarea name="textarea" id="myText" cols="30" rows="10"></textarea>
</form>
form基础表单总结相关推荐
- Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
- ExtJs 第二章,Ext.form.Basic表单操作
1.认识Ext.form.Panel表单面板 Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 ...
- HTML标签汇总(基础表单部分)
HTML标签汇总(基础表单部分) <form> 用于用户输入创建的HTML表单 表单包含<input>元素,比如文本字段,复选框,单选框,提交按钮等等 表单还可以包含menus ...
- Java入力项目无法设定到form_html中关于form与表单提交操作的资料集合
原标题:html中关于form与表单提交操作的资料集合 这里我们介绍一下form元素与表单提交方面的知识. form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLEle ...
- 关于form与表单提交
一个表单里面只要有form元素,如果没有给action加一个默认值,为空白的时候,当你刷新页面时,会弹出一个警告框提示你已经填入表单,刷新数据将会丢失. 如果一个表单里面有一个type="s ...
- 基于elementUI封装了基础表单组件
开头先BB两句 elementUI的表单组件,自带表单验证规则.虽然已经很方便了,但是我还是想封装一下. 通常用到的表单类型,主要包括:Radio 单选框,输入框,下拉框. 我封装了一个基础组件.把这 ...
- PHP基础-表单数据
说明 示例中使用用函数说明: isset函数() 当要 判断一个变量是否已经声明的时候 可以使用 isset 函数,可以避免Notice:Undefined index...错误 htmlspecia ...
- 前端项目实战175-ant design form清空表单
form清空表单 const handleClear = (index: any) => {form.setFieldsValue({ [`overlayLength-${index}`]: n ...
- form提交表单时本地下载
form 提交表单时,没有进行跳转页面,而进行的时本地下载,或自动连接你的迅雷下载. 我把这句 contentType="text/html;charset=utf-8" 代码写成 ...
最新文章
- pandas使用idxmin函数获取dataframe每个数据行中最小值对应的列名称(column label of min value in each row in dataframe)
- 每日冲刺报告——Day4(Java-Team)
- 图像检索:CNN对Hash组算法的颠覆
- JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十九)强制重做
- gbdt 算法比随机森林容易_随机森林与GBDT
- c与python内存传递_python - 从Python向C ++传递COM指针数组 - 堆栈内存溢出
- python函数示例_PHP closeir()函数与示例
- activity状态的保存和恢复
- 【语音处理】基于matlab GUI语音时域频域频谱图分析【含Matlab源码 527期】
- go导出mysql中的excel表,MySQL导出数据,并转存到Excel表格中
- jquery左侧图片与右侧图片以及放大镜和图片的放大的图片和产品的隐藏的效果
- word 此文件来自其它计算机,问题解决: 此文件来自其他计算机,可能被阻止以帮助保护该计算机/WORD在试图打开文件时遇到错误……...
- 微信小程序 中使用三元运算符
- 探索C++虚函数在g++中的实现
- C/C++如何将一个数字三位三位加逗号
- 2020年的创业趋势是什么?未来适合什么行业钱赚的多?[附十六大趋势]
- QT应用编程: 编写MQTT客户端登录OnetNet服务器完成主题订阅与发布
- 易语言制作一款屏幕锁,锁屏并且透明
- python:pygame的各种使用方法
- 零基础无实物一步一步学PLCS7-1200仿真(八)-按键控制数码管显示
热门文章
- SAP-MM-预留控制
- 中国首个“百万羽非笼养蛋鸡”项目启动
- 华为oj初级 求解立方根
- 学业水平考试计算机成绩查询入口,2018广东学业水平考试成绩查询入口
- 近200篇云计算、虚拟化、Hadoop、MapReduce、HDFS等云计算相关资料整理下载
- 把客户端文件发送到服务器,客户端向服务器发送文件
- vue 项目内存溢出_Vue/React 项目运行或者打包出现内存溢出解决方案
- git (版本控制器)
- 【最简单】Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件)
- dos批处理 for用法