玩转html5(三)---智能表单（form），使排版更加方便
<!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>
玩转html5(三)---智能表单（form），使排版更加方便的更多相关文章
- 第86天：HTML5应用程序标签和智能表单
一.HTML5应用程序标签 1.datalist需要数据载体 input list属性指向数据源 2.progress进度条 -webkit-appearance: none; /*如果要改默认样 ...
- HTML5 智能表单
HTML5 智能表单 1.表单新增属性 ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...
- HTML5智能表单
HTML5 智能表单 1.表单新增属性 ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...
- BootStrap 智能表单系列 三 分块表单配置的介绍
相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- form的智能表单
1.智能表单的介绍 其中,(1)中的使用格式使得form不会太臃肿. 2.使用规范 3.新属性 4.举例 二.程序 1.关于邮件的问题 <!DOCTYPE html> <head&g ...
- HTML5_智能表单
1.HTML5中为了方便排版,可以使from中的表单标签脱离from的嵌套.方法:from指定ID,所有表单标签均添加from=id属性. <form action="http://l ...
- BootStrap 智能表单系列 首页 (持续更新中...)
背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- BootStrap 智能表单系列 二 BootStrap支持的类型简介
代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <! ...
随机推荐
- oracle数据库、客户端安装以及ps/sql连接和导入表实例
从下面的网址下载http://www.oracle.com/technetwork/database/enterprise-edition/downloads/112010-win32soft-098 ...
- codeforces 577
codeforces 577A 题目链接:http://codeforces.com/problemset/problem/577/A 题目大意:给出一个n*n的表格,每个表格对应的值为横坐标*纵坐标 ...
- WM_NCHITTEST有21种取值，常用的有HTCAPTION，HTCLIENT，HTBORDER，HTSYSMENU，HTTRANSPARENT，罗列所有VCL里对其使用的情况
我为了移动一个无标题栏的窗体,使用了WM_NCHITTEST消息,这个消息大概如下: 通常,我们拖动对话框窗口的标题栏来移动窗口,但有时候,我们想通过鼠标在客户区上拖动来移动窗口. 一个容易想到的方案 ...
- SilkTest高级进阶系列8 – 放下榔头，立地成佛
在地球尚未毁灭的某天,手动测试的同事找到你所在的自动组,问是否可以帮助他们自动化一个需要连续添加100个条目的测试用例,因为他们觉得这是一个噩梦.你口头上说要先烟酒烟酒才能知道,但是内里早就满心欢喜: ...
- c++一些语法模板
函数模板特 template <class T> int compare(T v1,T v2) { if(v1<v2) return -1; else if(v1>v2) re ...
- Git——git 上传时 遗漏文件解决办法
今天在Server上建立一个git 库,把本地的code 上传到Server,再次clone下来时,发现少了些文件.原来git 工具不上上传一些二进制,pdf,.patch等一些文件.在上传时,git ...
- 10、ERP设计之系统基础管理(BS)- 平台化设计
ShareERP 2013-09-03 ERP业务平台化是每个软件提供商必须要进行的趋势,传统定制化路线已死,不能走定制化的老路了.以往最大问的题是不能累积和沉淀技术及提升项目业务管理能力,其次是管理 ...
- NTFS权限设置时卡死
客户是一家技术咨询和零部件制造的小公司,使用的文件服务器为R410上插4块1T硬盘做raid 5,服务器操作系统为windows server 2008R2,所有的设计资料的授权都是结合域账户和NTF ...
- CentOS 7 安装MySql Server 5.6
1. 安装MySql Server 在/etc/yum.repos.d/目录下添加以下文件mysql-community.repo文件,内容如下: [mysql56-community] name=M ...
- Python倒计时器(转)
# Countdown using Tkinter from Tkinter import * import time import tkMessageBox class App: def __ini ...