-
2020-04-01 14:01:13
formLayout 不起作用
Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应:
// 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 }, } -------------------------------------------------------------------------- <Form layout="horizontal" {...formLayout }> <Row> <Col span={6}> <Form.Item label="xxx"> <Select> .... </Select> </Form.Item> </Col> <Col span={6}> <Form.Item label="xxx"> <Select> .... </Select> </Form.Item> </Col> </Row> </Form> //方法2 给 Form.Item 手动设置宽度 <Form layout="inline" {...formLayout }> <Form.Item label="xxx" style={{width:'25%'}}> //百分比 <Select> .... </Select> </Form.Item> <Form.Item label="xxx" style={{width:'200px'}}>// 固定宽度 <Select> .... </Select> </Form.Item> </Form>
更多相关内容 -
bootstrap中的 form表单属性role="form"的作用详解
2020-08-31 14:34:14主要介绍了bootstrap中的 form表单属性role="form"的作用详解,非常不错,具有参考借鉴价值,需要的朋友参考下吧 -
jquery动态改变form属性提交表单
2020-10-25 20:55:29在js中动态改变form的属性,满足不同条件的form提交需求,下面有个不错的示例,大家可以参考下 -
js获取form表单中name属性的值
2020-10-17 08:52:05今天小编就为大家分享一篇关于js获取form表单中name属性的值,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 -
form表单的属性
2019-11-21 17:37:00form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是表单的标签,所有的需要写在...form表单HTML标签、属性、属性值:
(单行文本输入框)
(密码输入框)
(单选框)
(多选框)
(提交按钮)
(重置按钮)
或者按钮(空按钮)(下拉框选) (多行文本框)
(1) 是表单的标签,所有的需要写在form里面才能今
进行提交;
1:name=”” form中的name属性主要是对这个form进行标记;
2:methood=”get/post” 其中 get/post 之间的区别:
1. get是从服务器上获取数据,post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL
中,值和表单内各个字段一一对应,在URL中可以看到。post是通
过HTTP post机制,将表单内各个字段与其内容放置在HTML
HEADER内一起传送到ACTION属性所指的URL地址。用户看不到
这个过程。
3. 对于get方式,服务器端用Request.QueryString获取变量的值,
对于post方式,服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,
一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中
为100KB。
5. get安全性非常低,post安全性较高。但是执行效率却比Post方法
好。
3: action=”” action=url用来指定处理提交表单的格式.它可以是一个
URL地址(提交给程式)或一个电子邮件地址.
4:enctype=cdata指明用来把表单提交给服务器时(当method值为”post”)
的互联网媒体形式.这个特性的缺省值是”application/x-www-form-
urlencoded”
5:target=”“指定提交的结果文档显示的位置: _blank :在一个新的、
无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同
的框架中调入文档; _parent :把文档调入当前框的直接的 frameset
框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来
的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框
没有你框时的_self.
(2)type=”text”是定义表单里面的单行文本框;value=”“文本框里默认的文字;size=”“单行文本框的宽度;maxlength=”“单行文本框所能输入的字节;
(3)type=”password” 定义密码框;
(4)type=”radio” 单选勾选框;
(5)type=”checkbox” 多选勾选框;
(6)type=”submit” 提交按钮;
(7)type=”reset” 重置按钮;
(8)type=”button”或者 两种方式都可以实现空按钮;
(9) 多行文本框,是一个双标签;
(10)
下拉菜单属性;form表单css3属性、属性值:
1、表单字段集:
功能:相当于一方框,在字段集中可以包含文本框包含其他元素,该元素
用于对表单中元素进行分组,并在文档中区别出文本。fieldset元素可以嵌
套,在其他内部可以再设置多个fieldset对象。
2、字段集标题
功能:legend元素可以再fieldset对象绘制的方框内插入一个标题。legend
元素必须是fieldset内第一个元素。
3、表单元素:
(1)上传文件框
文本域
(2)图像域(图片按钮)
form表单HTML5新增标签、属性、属性值:
1.email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
2.url:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
例:http://www.baidu.com”>- number 和 range
number 类型是专门用来输入数字的,并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值,min 是允许的最小值,step 是间隔。设置了这些属性后,如果手动填入的数字不符合这些属性条件,将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似,也有 max、min 和 step 属性,在 Opera 中,可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值,但可以使用 output 输出当前值。
- datetime 和 datetime-local
datetime 类型是用来输入 UTC 日期和时间的文本框,而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。
- month 和 weekmonth 类型是月份选择器,它的值为:年-月,如:2012-01;week 类型是周选择器,它的值为:年-W周数,如:2011-W02。
- search
search 类型的是用来输入搜索关键词的文本框,它与 text 类型在功能都没有太大区别,只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。
7.color
color 类型用来选取颜色,它提供了一个颜色选取器,值为 16 进制符号,如:#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。
8.output元素: 定义不同类型的输出,如计算结果的输出,或脚本的输出。
注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。
0
100+
=
ML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。
1、自动验证
1)、required
可以应用在大多数输入元素上,在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。
2)、pattern
将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例:(3)placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。
(4)autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个。
(5) autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
注释:autocomplete 属性适用于 ,以及下面的 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
提示:在某些浏览器中,您可能需要手动启用自动完成功能。HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能。
1、自动验证
3)、 min、max、step:为包含数字或日期的 input 类型规定限定(约束)
max: 最大值
min: 最小值
step: 数字间隔
例:
2、取消验证
可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证附:适用form表单的UI状态伪类选择器
- number 和 range
-
form表单元素及其属性
2017-10-28 13:36:00form元素及其属性代码<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>表单元素及其属性</title> </head> <body> <form action="http:www.baidu.com" method="get" target="_blank"> 提交按钮 <input type="submit"><br> 文本按钮 <input type="text"><br> 重置按钮 <input type="reset"><br> 普通按钮 <input type="button"><br> 图片式提交按钮 <input type="image" src="海滩背景.jpg"><br> 隐藏字段 <input type="hidden" value="syb"><br> 邮箱地址输入(新属性值),会验证,邮箱格式不正确会出现提示 <input type="email"><br> 网址输入(新属性值),会验证,网址格式不正确会提示 <input type="url"><br> 电话号码输入(新属性值),不会验证 <input type="tel"><br> 输入的是数字(新属性值),配合max、min、step、value(默认值)使用 <input type="number" max="10" min="0" step="2" value="2"><br> 活动条(新属性值),与number类似 <input type="range" max="100" min="60" step="5" value="70"><br> 时间类:(新增属性值)<br> (1)datetime <input type="datetime"><br> (2)date <input type="date"><br> (3)datetime-local <input type="datetime-local"><br> (4)month <input type="month"><br> (5)week <input type="week"><br> 颜色,点击按钮选择颜色 <input type="color"><br> 搜索框 <input type="search"><br> <!-- 选取文件,accept写文件类型,multipe一次可以选取多个文件,这里写的文件格式筛选不知出了什么问题,无效... <input type="file" accept="image/jpg" multiple="multiple"><br> --> 复选框 <input type="checkbox" name="fx">html <input type="checkbox" name="fx">css <input type="checkbox" name="fx" checked="checked">javascript <br> 单选框 <input type="radio" name="dx">男 <input type="radio" name="dx">女 <input type="radio" name="dx" checked="checked">保密 </form> <form action=""> <h3>注册界面</h3> 用户名:<input type="text" value="少于四个字" maxlength="4" required="required" autofocus="autofocus"><br> <!-- 这里的获焦与下面的accesskey有冲突,二者只能选其一 --> 密码:<input type="password" autocomplete="off" ><br> 国家:<input type="text" readonly="readonly" value="Chinna" ><br> 地址:<input type="text" required="required" > <input type="text" disabled="disabled" value="如**省**市"><br> 验证码:<input type="search" placeholder="请输入验证码" accesskey="v"> <input type="button" value="点击获取验证码"><br> <input type="submit" value="注册"> </form> </body> </html>
Form元素及其属性
Form元素用来定义一个表单,是建立表单的基础元素(类似于定义表格的table)
表单的其他元素包含在form元素中,其主要子元素有:input、button、select…
属性:
1. action指定表单的发送地址(服务器地址)
2. method是表单数据发送至服务器的方法,常用的有两种:get、post,用的input 的type属性值是submit,“提交”是这个按钮value属性的默认值
3. get和post的区别:
(1) get方法提交,数据会附在网址之后主动提交给服务器
(2) post方法提交数据不会附在网址后,会将数据打包发送给服务器,等候服务器来读取数据进行处理
4. 还可以添加一个target属性,指定在新窗口打开
5. Input元素属性:
(1) type属性:指定输入内容的类型,默认为text,单行文本框,还有password、submit、reset、button这些值
image是图片式提交按钮
hidden隐藏字段
email表示要输入一个电子邮箱(新属性值),会对输入内容进行验证
url表示要输入一个网址(新属性值),会对输入内容进行验证
tel表示输入的内容是一个电话号码(新属性值),不会对输入的内容验证
number可以配合input的max、min、step、value规定允许输入的最大值、最小值、步长、默认值(新属性值)
range(活动条)与number类型类似,也表示一定范围输入,但是以一个活动条的状态显示
时间类(新增属性值):包括datetime、datetime-local、date、month、week、time
Color:可以建立一个颜色的选择输入框
Search(新属性值)用于建立一个搜索框,用来供用户输入搜索的关键词
File用来创建一个文件选取的输入框,可通过accept属性规定选取文件的类型,比如图片、视频,multipe属性可以设定一次允许选择多个文件
Checkbox:复选框,通过checked属性可将某个选项设为默认的选取状态,再次点击取消选取
Radio:单选框,通过checked属性可将某个选项设为默认的选取状态,再次点击取消选取,必须将同一组选项设置为一个相同的name属性值
(2) name属性:输入内容的识别名称,传递参数时候的名称
(3) value属性:默认值
(4) maxlength属性:输入的最大字数
(5) readonly属性:只读属性,设置内容不可变更
(6) disabled属性:设置为不可用
(7) require属性:设置内容为必须填写项,否则无法提交(新属性)
(8) placeholder属性:设置默认值(暗沉色字体),当文本框获得焦点时被清空,对text、url、tel、email、password、search有效
(9) autocomplete属性:属性值为on/off,定义是否开启浏览器自动记忆功能
(10) autofocus属性:自动获得焦点
(11) accesskey属性:指定快捷键Windows中,指定快捷键后,按alt+“快捷键”,便会获得焦点
(12) tabindex属性 :指定按tab键时,项目间的移动顺序
-
FORM表单及其属性
2017-04-07 18:08:39head> meta charset="UTF-8"> h1 style="text-align: center">表单formh1> title>css常用选择器title> head> body> form action="contact04.html" method="get" id="ddl"> 用来指定数据要提交<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <h1 style="text-align: center">表单form</h1> <title>css常用选择器</title> </head> <body> <form action="contact04.html" method="get" id="ddl"> <!--action 用来指定数据要提交到哪里去 method 指定网络请求的方式 (1) get请求 传递到服务端的数据以追加到url路径后的方式发送 规则 所有数据都在?之后,多个数据以&符号进行分割 get请求缺点 网络请求数据直接暴露在url里;敏感数据容易被窃取 属绝传输量小 post 传递到服务端的数据隐藏在请求体里,隐藏敏感数据 post请求的优点:传输的数据隐秘性比较好,数据传输量基本上没有什么限制--> <!--input的类型 name属性必须添加!!!!为了正常的提交数据到服务器 text单行文本 password 密码 输入的文本一隐藏的方式显示 radio 单选框 护持的效果通过同名name来实现, value是提交数据到服务器是方便组成键值对--> <!--tabindex=""可以更改tab键的跳转顺序--> <!-- autocomplete 自动完成功能 autofocus 自动获取焦点 required 必填 placeholder 提示 --> <!-- 能够不用table标签就别用 浏览器运行速度非常慢慢慢慢--> <fieldset> <legend>用户注册用户注册用户注册用户注册用户注册用户注册用户注册用户注册用户注册</legend> <table align="center"> <tr> <td>会员名:</td> <td><input type="text" name="name" autocomplete="on" autofocus required placeholder="填写会员名" value="朝思暮林" readonly="false"/> </td> <td>(可包含a-z,0-9和下划线)</td> </tr> <tr> <td>密码1:</td> <td><input type="password" name="pwd" tabindex="1" autocomplete="on"/></td> <!--name属性一定要有--> <td>(至少包含6个字符)</td> <!--tabindex="1" 这是tab键的跳转顺序--> </tr> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 </td> <td>必填</td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby" value="basketball"/>篮球 <input type="checkbox" name="hobby" value="football"/>足球 </td> <td>必填</td> </tr> <tr> <td><input type="submit"/> </td> <td><input type="reset"/> </td> </tr> <tr> <td><input type="file" name="file"/></td> </tr> <tr> <td><input type="button" value="putonganniu"/></td> <!--无法跳转--> <td><input type="image" src="../../img/qqzone.png"/> </td> <td> <button>普通按钮</button> </td> </tr> <tr> <td>ez</td> <td> <select name="idd" id="idd" multiple size="5"> <!--multiple可以多选--> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> <option value="4">d</option> <option value="4">e</option> <option value="4">f</option> <option value="4">g</option> </select> </td> </tr> <tr> <td colspan="3" align="center"><input type="submit"/></td> </tr> <tr> <td>协议</td> <td colspan="2"> <textarea name="xieyi" id="" cols="15" rows="3">sssssssssssss</textarea> </td> </tr> </table> </fieldset> </form> <hr/> <input style="text-align: center" type="text" name="nick" placeholder="请输入昵称" form="ddl"/> <form action="contact04.html" method="get"> <fieldset> <table align="center"> <tr> <td>邮箱</td> <td><input type="email" name="email"/></td> </tr> <tr> <td>地址</td> <td><input type="url" name="url"/></td> </tr> <tr> <td>日期</td> <td><input type="date" name="date"/></td> </tr> <tr> <td>时间</td> <td><input type="time" name="time"/></td> </tr> <tr> <td>月份</td> <td><input type="month" name="month"/></td> </tr> <tr> <td>星期</td> <td><input type="week" name="week"/></td> </tr> <tr> <td>滚动条</td> <td><input type="range" name="range"/></td> </tr> <tr> <td>颜色</td> <td><input type="color" name="color"/></td> </tr> <tr> <td><input type="submit"/></td> </tr> <tr> <td>下拉列表</td> <td> <input id="mycar" list="cars"/> <!--datalist list两个要一样--> <datalist id="cars"> <option value="BMW"></option> <option value="Ford"></option> <option value="Volov"></option> </datalist> </td> </tr> </table> </fieldset> </form> <progress value="50" max="100"></progress> <meter value="9" min="2" max="10"></meter> <!--温度值--> </body> </html>
-
form表单target属性运用
2018-05-18 17:23:56form表单的target,当iframe设置为隐藏时,可以实现当前页表单提交而部进行跳转刷新,代码如下:<form action="提交的action" method="post" target="myIframe">......... -
form表单中几种属性
2019-05-02 09:38:07表单的主要功能是收集信息,一般分两部分:1.体现表单元素的HTML代码;2.客户端脚本 ,或是服务器用来处理用户所填写信息的程序。 action就是你表单要提交的地址。地址可以是请求后台的地址,如Servlet,Struts 等... -
form表单中的enctype属性
2019-04-26 14:00:45form表单中的enctype属性 enctype就是encodetype就是编码类型的意思。 multipart/form-data是指表单数据中由多部分构成,既有文本数据,又有文件等二进制数据 需要注意的是:默认情况下,enctype的值... -
form表单属性action的值特性
2018-10-14 12:27:42form表单提交路径action="" 时的一种特殊情况 一、说明: 当页面的form表达的action=""时,表示表单会提交到当前页面,但是如果当前页面的URL里已经带有一个参数了,每次提交表达时这个参数... -
FORM表单的几大属性
2016-12-28 16:47:46FORM表单的几大属性问题引入 在做一个活动支付项目的时候,提交订单(form表单)跳转支付页面发现没有反应。经过断点排查发现断点也进了,不报错。但是返回的就是空白页,让人很纠结。 进过反复测试,才发现是... -
HTML中的form表单的标签、属性、属性值; CSS以及HTML5新增属性、属性值
2018-08-11 21:33:56form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选... -
获取form表单的有name属性的value值
2019-05-13 10:03:02var x = $(“form”).serializeArray(); // var czr_seria = {}; $.each(x, function (i, field) { //czr_seria += field.name + “:” + field.value + “,”; model[field.name] = field.value; }); ... -
form表单详解
2020-07-06 16:02:56form表单详解form表单属性 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序以处理,从而使得Web服务器与用户之间具有交互功能。 表单实现前后台交互:用户将... -
vue实现动态添加form表单
2020-08-25 15:36:52上篇博客介绍了如何动态实现table的新增表格,其实对于表格和表单的动态添加在日常场景中用到的还蛮多的,两者的实现都有着诸多相似之处,本篇博客小编带领大家揭开实现动态增加form表单的神秘面纱。 图示最终效果:... -
前端HTML<form>表单的属性和使用
2016-10-06 01:09:501.表单的作用 表单用于显示、收集信息,并将信息提交给服务器 2.表单的元素 1、语法 允许出现表单控件 2、属性 1、action 定义表单被提交时发生的动作 -
前端开发日记之form表单name属性详解
2016-09-09 15:52:49今天,我们就来谈一谈form表单里的name属性可能给我们带来的困扰。 大家看如下代码: 我们发现当form表单的name值和我们的js函数重名时,js函数就无法调用,会提示“Uncaught TypeError: test -
form表单中name的作用
2020-09-11 18:36:18简单的说就是你在前端页面想使用form表单传递值的时候,必须要把name的值写成你传递的变量的名称一样。不然不能传参 eg: <form action="http://192.168.3.196:7001/upload" method="post" -
HttpServletRequest--获取form表单数据
2020-08-27 18:46:33@RequestMapping(value="/pay",method = RequestMethod.POST) public String buildRequest(HttpServletRequest request){ Map<String,String> parmMap=new HashMap<String,String>();... -
elementUI的form表单赋值之后无法修改值
2021-07-16 19:00:14赋值的时候如果是用映射的关系,那么form值和赋值者用的是同一个地址,这个时候对赋值后的form数据进行深拷贝即可 -
form表单提交-忽略表单验证(form表单的novalidate属性)
2020-07-30 15:15:16form表单的novalidate属性 novalidate属性: 作用: 在表单提交时不对表单中输入的值进行验证; 语法: <form novalidate> 特点: 1. HTML5之后的新属性; 2. 使用于<form>表单以及<input>... -
form表单控件及控件属性
2019-09-25 00:21:09今天又学习了前端的form控件,这是我第二遍学习,确实发现不少新东西,把自己觉得常用的记下来 表单控件: **form:最主要的一个标签,但是这个元素不会生成可是化部分** 属性: action:表单提交的地址 method... -
form表单新增的三个属性,form属性,multiple属性,pattern属性。
2017-10-24 17:09:51-- 这个主要是说明了HTML5的新属性,以前的form表单的控件必须要在form的双标签之内,现在的话,不用了,我们可以 脱离form的双标签在别的地方写控件了,只要在控件的末端加上主要的form表单的ID就可以了,如上面的... -
(一)使用form表单的name属性简单实现前后端交互
2021-11-14 13:10:10实现效果: 点击提交后: 前端页面源码: <!... ...Ajax前后端交互_通过name属性进行</title> </head> <body> <form action="/" method="post"> 用户名:<input type= -
form表单的各种属性简单列举
2017-05-19 15:37:01form表单的各种属性列举 -
表单form新增的type属性
2019-02-16 16:48:47<!DOCTYPE html> <html> <head&...表单新增的type属性</title> </head> <body> <form action="test -
form表单中的action属性
2021-07-17 14:48:16form表单中的action属性的值是表单提交给的url,如果我们没有设置action属性,那么默认的表单还是提交给当前页面