<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form表单学习笔记</title>
</head>
<body>
<!-- 在旧版的html中,form表单与input等元素必须嵌套使用,为了排版方便,在html中提出了新方法
表单的多个内容不必非得放到一块,为前台美工提供了很大的方便-->
<!-- 首先新建一个form表单,给其定义一个id -->
<form id="regForm">
邮箱 :<input type="email" name="user_email" autofocus="autofocus"/>
</form>
<!-- 然后定义一个其他标签,比如input,submit,关联这个id -->
用户名:<input name="name" type="text" form="regForm"/>
<input type="submit" form="regForm"/>
<!-- 点击按钮时,按默认方式提交,可以在地址栏看到提交信息 -->
<!-- 关于html5新增的一些input属性,在我的另一篇文章这种专门讲过,给大家个链接,在这里就不在赘述了。 -->
http://blog.csdn.net/u012116457/article/details/24577509
<!-- 下来讲一下新增的表单属性 -->
1.属性:required 值:required 表单拥有该属性表示内容不能为空,为必填项
<input name="name" type="password" required="required" form="regForm"/>
2.属性:placeholder 值:提示文本 表单的提示信息,若存在默认值则不显示
<!-- 讲这个属性有必要先搞明白旧版本中是怎么提示默认值的,旧版本使用的是value属性 -->
用户名:<input type="text" name="name" value="默认值" form="regForm"/>
<!-- 当点击提交时,若用户不对其进行修改,会把“默认值”这三个字也传向后台,而我们往往不需要,
html5为我们提供的这个新属性,如果用户不对默认值进行修改,其内容将不会被提交 -->
用户名:<input type="text" name="name" placeholder="默认值" form="regForm"/>
<!-- 在表现形式上也有所改变,大家可以自己试试 -->
3.属性:autofocus 值:autofocus 自动聚焦属性,页面加载完成后光标会自动聚焦到指定表单
用户名:<input type="text" name="name" autofocus="autofocus" form="regForm"/>
刷新页面后,光标会自动聚焦到该文本框中
4.属性:Pattern 值:正则表达式 输入的内容必须匹配到指定正则
<!-- 在以往的html中使用正则需要写到js等里边,html5中可以直接使用正则表达式,在html中就可以直接判断,
是不是省了好多事情呢? -->
<!-- 下面这个例子中正则的意思是只能输入8位数字,在前台页面,若不符合规则,会提示格式不对 -->
学号:<input type="text" name="num" Pattern="\d{8}"/>
</body>
</html>
分享到:
相关推荐
Element UI表单设计,将生成的代码直接运行在基于Element的vue项目中,也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 npm i form-gen-parser@1.0.3 npm install clipboard@2.0.4 --save npm install ...
form-generator表单设计器api文档,用于设计自定义组件
ant-design-vue3.x的form表单爬坑
漂亮的form表单-漂亮的form表单-漂亮的form表单
html5+css3实现酷炫的form表单
laravel-admin框架form表的的一个自定义插件。主要功能:模拟grid表格,实现一个列表样式的form表单控件。修复form表单的with方法和default方法。
jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的...
Atom-laravelcollective-html-form-snippets-atom.zip,用于laravelcollective html表单元素的atom片段。atom的laravelcollective html表单片段,atom是一个用web技术构建的开源文本编辑器。
json-obj-form-generator 从JSON对象生成表单安装npm install --save json-obj-form-generator 有关更多信息,请查看有关沙箱(游乐场),设计师翻译生成器等的文档。设计者的用法import { JOFGENDesigner } from '...
jquery-form - jQuery表单生成插件 。
一个简单的本机组件,用于包装表单字段并获取其值,而无需将侦听器附加到各处。 安装 npm install --save react-native-form 用法 只需将您的字段放入表单中,并附上两个道具: name =>您检索值的键(必需) type ...
Jquery中使用ajax,表单post提交数据 插入oracle数据库, html对应的文件中 将form 表单数据 转化为json 格式
微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的”switch”,”input”,”checkbox”,”slider”,...
原生JS经典小项目-form表单校验
漂亮Login登陆Form表单html5模板
vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具,并且支持vscode 插件、cli 本地启动、在线设计多种方式,让表单开发的效率更上一层楼! vue-ele-form-generator特性: 1、提供vscode 插件更...
vue_form_design:基于Vue3.0的表单设计器
为您提供vue-ele-form-generator可视化表单设计工具下载,vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具,并且支持vscode 插件、cli 本地启动、在线设计多种方式,让表单开发的效率更上一层楼...
微信小程序表单自定义组件vest-form-master.zip
该代码包含完整的html、css、javascript代码,能够良好的实现form表单拖拽功能。