- 综合排序
- 最热优先
- 最新优先
- 来自专栏Devops专栏
8. html form表单
“仅供学习，转载请注明出处” form表单 表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下： 1、<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式，一般有“get”方式和“post”方式 ---- 2、<label>标签 为表单元素定义文字标注 ---- 3、<input>标签 定义通用的表单元素 type属性 type="reset" 定义重置按钮 type="button" 定义一个普通按钮 type="image" 定义图片作为提交按钮，用src属性定义图片地址 type="hidden" 定义一个隐藏的表单域 ，用来存储值 value属性 定义表单元素的值 name属性 定义表单元素的名称，此名称是提交数据时的键名 ---- 4、<textarea>标签 定义多行文本输入框 ---- 5、<select>标签 定义下拉表单元素 ---- 6、<option>标签 与 <select>标签配合，定义下拉表单元素中的选项 注册表单实例： <!
41320编辑于 2022-01-14 - 来自专栏杰的记事本
Flexbox在表单布局的应用
一、<form> 元素 表单使用<form>元素。 <form></form> 上面是一个空表单。根据 HTML 标准，它是一个块级元素，默认将占据全部宽度，但是高度为0，因为没有任何内容。 二、表单控件 现在，加入两个最常用的表单控件。 上图是浏览器对这个表单的默认渲染（颜色除外），可以看到，这两个控件之间有3像素～4像素的间隔，这是浏览器的内置样式指定的。 三、指定 Flexbox 布局 接着，指定表单使用 Flexbox 布局。 本例中，按钮变高了，导致表单元素也变高了，使得输入框的高度自动拉伸了。 align-self属性可以改变这种行为。 这时，可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。
1.5K20发布于 2019-09-04 - 来自专栏编程
AngularJS中使用表单输入的应用设计
在Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的，你可以使用ng-model属性把元素绑定到你的模型属性上。 这一机制对于所有标准的表单元素都可以起作用，例如文本框、单选按钮、复选框，等等。 如果你正在使用表单把输入项组织起来，你可以在form自身上使用ng-submit指令来指定一个函数，当表单提交的时候可以执行这个函数。 我们来扩展前面的例子，实现用户点击一个按钮就可以为他所选的商品计算金额： 同时，在提交表单的时候，ng-submit还会自动阻止浏览器执行默认的POST操作。 对于处理其他事件的情况，例如提供非表单提交型的交互，Angular提供了一些事件处理指令，它们类似于浏览器原生的事件属性。
2.9K60发布于 2018-01-08 - 来自专栏采云轩
浅谈表单受控性及结合Hooks应用
2 受控和非受控表单差异 2.1 受控表单的特点和使用场景 受控表单是指表单元素的值受 React 组件的 state 或 props 控制。 使用场景： 需要对用户输入进行验证和处理的表单 需要实时反映用户输入的值的表单 需要根据表单元素的值动态地改变其他组件的状态或行为等情况时会使用到受控表单 示例代码： import React, { useState 非受控表单是指表单元素的值不受 React 组件的 state 或 props 控制，而是将表单数据交给 DOM 节点来处理，可以使用 Ref 来获取数据。 特点 受控表单 非受控表单 value 管理 受控表单元素的值保存在组件的 state 中，方便访问和操作 非受控组件需要依赖 ref 来获取元素值，并且会受到组件生命周期变更而影响值 验证和实时性 可以实时验证和处理用户输入 不利于实时反映用户输入的值，不方便对用户输入进行验证和处理 表单的整体控制 对表单数据有更好的控制 对表单数据的控制有限 数据流 可以根据表单元素的值动态地改变其他组件的状态或行为
2K10编辑于 2023-12-21 - 来自专栏数栈技术分享
Form 表单在数栈的应用(上): 校验篇
一、引言 本文为主题即为 Form 表单在数栈的应用，旨在希望能通过一些在数栈已经应用的实例和笔者整理的小tips来帮助大家更深入的理解Form表单校验、以及联动校验的认知和做法。 本文的重点为 Form 表单的校验及在数栈中的应用，偏向于应用总结与心得分享。 关于 Form 表单的其他内容，在 Form 表单在数栈的应用(下) 会和大家见面。 校验指定表单域 特定时间点对于指定表单域的正确性校验，如果指定表单域通过校验方可进行下一步操作。 this.props.form.validateFields((err, values) => { // to do sth }) 五、思考与总结 本文罗列了一些 antd form 3.x 在数栈的一些典型应用
2.6K20编辑于 2022-01-12 - 来自专栏数栈技术分享
Form 表单在数栈的应用(下)：深入篇
这篇文章的主题为我们对 Form 表单在数栈产品中使用之后理解消化的一个过程，通过介绍一些 Form 表单中常用到的方法，来理解部分设计思想，加深我们对技术的追求。 主要介绍 Form 表单的创建和 Form表单双向绑定（getFieldDecorator）。 后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件，以下简称为 Form 表单。 在 Form 表单在数栈的应用(上): 校验篇 中提到，我们生在一个最好的时代，其实是别人造好轮子帮我们做了一些事情，那我们今天看一看，别人的轮子是怎么造的，我们自己能不能实现。 1.3 validateFields 通常使用 validateFields 方法对我们的表单数据进行校验，查看 createBaseForm.js 文件中 validateFields 方法的实现后， this.setFields(nowAllFields); ... } 总得来说，Form 表单从初始化到表单收集校验经过了以下几个步骤： 1、通过 Form.create 方法初始了一些属性到
1.1K10编辑于 2022-04-13 - 来自专栏数栈技术分享
Form 表单在数栈的应用(上): 校验篇
一、引言 本文为主题即为 Form 表单在数栈的应用，旨在希望能通过一些在数栈已经应用的实例和笔者整理的小tips来帮助大家更深入的理解Form表单校验、以及联动校验的认知和做法。 本文的重点为 Form 表单的校验及在数栈中的应用，偏向于应用总结与心得分享。 关于 Form 表单的其他内容，在 Form 表单在数栈的应用(下) 会和大家见面。 校验指定表单域 特定时间点对于指定表单域的正确性校验，如果指定表单域通过校验方可进行下一步操作。 this.props.form.validateFields((err, values) => { // to do sth }) 五、思考与总结 本文罗列了一些 antd form 3.x 在数栈的一些典型应用
1.8K20编辑于 2022-04-13 - 来自专栏HTML5学堂
iframe跨域应用 - 使用iframe提交表单数据
在使用iframe跨域之前，可能你的脑海中就出现了这样一个问题：为何提交表单数据还需要跨域呢？ 注册时：会获取到当前表单内容，之后进行MD5加密，最后再数据库中保存处理后的密码。 DOCTYPE html> <html> <head> <meta charset="UTF-<em>8</em>" /> <title>HTML5学堂 A域中的a.html</title> <link iframeJquery = $('#newframe')[0].contentWindow.$; callback && callback(); }); } 第四步 获取表单数据并进行表单数据序列化 在点击按钮时，我们需要获取表单数据并进行表单数据序列化，之后对数据进行md5加密。
6.2K50发布于 2018-03-12 - 来自专栏十月梦想
表单
1.表单控件 1.input标记 1.input标记 提供文本输入框，密码输入框，按钮，单选按钮，多选按钮，文件上传框，隐藏域 2.属性 创建不同的输入框 value：输入框的值 name:给输入框起个名字(必须要写) disabled：禁止 3.具体的表单 height: <input type="text" /> weight: <input type="text" /> </fieldset> </form> fieldset标签嵌套在form表单里面 ， 会出现组合表单外边的边框 !
3.1K30发布于 2018-08-29 - 来自专栏数栈技术分享
Form 表单在数栈的应用(下)：深入篇
这篇文章的主题为我们对 Form 表单在数栈产品中使用之后理解消化的一个过程，通过介绍一些 Form 表单中常用到的方法，来理解部分设计思想，加深我们对技术的追求。 主要介绍 Form 表单的创建和 Form表单双向绑定（getFieldDecorator）。 后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件，以下简称为 Form 表单。 在 Form 表单在数栈的应用(上): 校验篇 中提到，我们生在一个最好的时代，其实是别人造好轮子帮我们做了一些事情，那我们今天看一看，别人的轮子是怎么造的，我们自己能不能实现。 this.setFields(nowAllFields); ... } 总得来说，Form 表单从初始化到表单收集校验经过了以下几个步骤： 1、通过 Form.create 方法初始了一些属性到
1.2K20编辑于 2022-01-19 - 来自专栏河湾欢儿的专栏
表单
在dom中提供了为我们提供了操作表单当中的一些控件的方法，比如说获取，操作还有一些特殊的属性。 获取：表单元素的操作 onchange事件 表单事件：onsubmit onreset window.onload= function () { var myform=document.getElementById window.onload= function () { var myform=document.getElementById('form1'); // onsubmit：当提交表单的时候触发 // onreset:当表单重置的时候触发 // myform.submit(); myform.onsubmit
2.8K20发布于 2018-09-06 - 来自专栏个人随笔
表单
一.表单 表单就是一个将用户信息组织起来的容器： <将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮的时候，表单会将数据统一发送给服务器> 1.表单的内容: 1）创建表单后，就可以在表单中放置控件以接受用户的输入 2）这些控件通常放在<form></form>标签之间，也可以在表单之外用来创建用户界面 3）不同的表单控件有不同的用途 2.表单标签及表单属性 表单的创建：<from>... 网站服务器方不希望用户修改数据，这些数据在表单元素中显示。 1"id="male"/> 表单的验证 验证表单的好处 1 减轻服务器的压力 2保证数据的可行性和安全性 在客户端对表单进行验证是非常有必要的 表单的初级验证
6.6K90发布于 2018-03-14 - 来自专栏韩曙亮的移动开发专栏
【HTML】HTML 表单 ⑤ ( form 表单域 )
文章目录 一、form 表单域 1、form 表单域作用 2、form 表单域语法 3、form 表单域 Get 请求 4、form 表单域 Post 请求 一、form 表单域 ---- 1、form 表单域作用 从 input 表单 , textarea 文本域 , select 下拉菜单 中收集了用户信息 , 需要通过 form 表单域 发送给 服务器端 ; 2、form 表单域语法 form 表单域 语法 : 在 form 表单域 中 , 要注明 服务器地址 , 提交方式 , 表单名称 ; <form action="服务器 URL 地址" method="<em>表单</em>提交方式" name="识别<em>表单</em>的名称 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>" /> <title>网页标题</title> DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>" /> <title>网页标题</title>
5.6K10编辑于 2023-03-30 - 来自专栏韩曙亮的移动开发专栏
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
一、HTML5 新增 input 表单 ---- HTML5 新增 input 表单 : 邮箱输入表单 : 必须输入邮箱 , 如果输入格式错误 , 提交时会在对话框中报错 ; <input type= "email" /> URL 输入表单 : 只能输入网址 , 格式错误会在对话框中报错 ; <input type="url" /> 日期输入表单 : 右侧的下拉菜单选择日期 ; 如果在手机中打开 , 会弹出手机中自带的日期选择对话框 ; <input type="date" /> 时间输入表单 : 右侧的下拉菜单选择时间 ; <input type="time" /> 月份输入表单 : 右侧的下拉菜单选择月份 ; <input type="month" /> 周日期输入表单 : 右侧的下拉菜单选择周数 ; <input type="week" /> 数字输入表单 : 无法输入非数字的内容 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <meta http-equiv="X-UA-Compatible
5.2K20编辑于 2023-04-24 - 来自专栏河湾欢儿的专栏
表单
form 表单 <input type="…… " name="" value="" /> text 文本框 password 密码 radio
1.5K20发布于 2018-09-06 - 来自专栏h5学习笔记
表单
表单的目的是为了跟用户进行交互，收集用户资料 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。 表单域 在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。 method 用于设置表单数据的提交方式，其取值为get或post。 name 用于指定表单的名称，以区分同一个页面中的多个表单。 注意： 每个表单都应该有自己表单域。 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <meta name="viewport" content="width
2.5K20发布于 2020-09-30 - 来自专栏centosDai
HTML表单__表单元素属性
看完“HTML表单__表单元素”那一节的同学会发现，同是input标签，type属性值不一样的时候，input类型完全不一样。 type就是input的一个属性，除type之外，还有很多属性，接下来我们开始了解表单元素属性都有哪些？ reset，定义重置按钮，会清空表单填写的信息。 button，定义按钮。 1.4 name属性，定义元素input的名，用于对提交到服务器后台表单数据标识。 1.5 value属性为input设定值 1.6 disabled 禁用文本域，input会处于灰化。 maxlength规定输入最大长度. name属性，定义元素input的名，用于对提交到服务器后台表单数据标识。 value属性为input设定值。
4.1K30发布于 2021-11-25 - 来自专栏centosDai
HTML表单__表单元素属性
看完“HTML表单__表单元素”那一节的同学会发现，同是input标签，type属性值不一样的时候，input类型完全不一样。 type就是input的一个属性，除type之外，还有很多属性，接下来我们开始了解表单元素属性都有哪些？ reset，定义重置按钮，会清空表单填写的信息。 button，定义按钮。 1.4 name属性，定义元素input的名，用于对提交到服务器后台表单数据标识。 1.5 value属性为input设定值 1.6 disabled 禁用文本域，input会处于灰化。 maxlength规定输入最大长度. name属性，定义元素input的名，用于对提交到服务器后台表单数据标识。 value属性为input设定值。
4.4K20发布于 2021-09-28 - 来自专栏更流畅、简洁的软件开发方式
表单控件续（1）——应用接口来简化和分散代码
后者是整个流程，前者是其中的一个步骤，是一个简单的思路说明，其中前三段代码都是表单控件里面的。 2、我要写的是一个表单控件，b/s结构里面的控件。 上一篇里的表单控件有很多需要完善的地方，这里先说一下扩展性。 扩展呢就是说可以比较方便的添加更多的子控件，而现在的表单控件里面只有两种，文本框和下拉列表框，这个显然是不够用的，那么如何更好的扩展呢？ 先回顾一下表单控件里的代码，由于要控制不同的子控件，所以case里面写了很多的代码，那么能不能简化一下呢，或者分给子控件自己解决。 集成.net框架里提供的框架，然后实现接口，表单控件里面在操作接口。（这个算不算面对接口编程呀？） 先定义接口。
1.2K90发布于 2018-02-07 - 来自专栏Java
提交表单与验证表单案例
提交表单与验证表单案例 需求 有如下注册页面，对表单进行校验，如果输入的用户名、密码、手机号符合规则，则允许提交；如果不符合规则，则不允许提交。 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>注册页面</title> <link href , 75, 0.3); } input[type="button"]:hover, input[type="submit"]:hover { background-color: #5a88c8; } input[type="button"]:active, input[type="submit"]:active { background-color: #5a88c8; } .err_msg 当用户点击 注册 按钮时，需要同时对输入的 用户名、密码、手机号 ，如果都符合规则，则提交表单； 如果有一个不符合规则，则不允许提交表单。
1.7K10编辑于 2025-01-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号