form表单中的常用控件
<form action="#" method="post">
placeholder:输入表单是提供一个提示
<input type="text" value="" name="text" placeholder="placeholder提供一个提示"/><br />
required:这个属性可以用于任何表单控件,它指示一个域是必要的,所有对于设置了这个
属性的控件,如果没有为这个控件指定一个值,就无法正常提交表单。
在支持这个属性的浏览器中,如果没有为required属性的域指定一个值,提交表单时
你会得到一个错误消息,表单不会提交到服务器。
<input type="text" placeholder="提示信息" required />
<br /> 文本输入框:<input type="text" value="" name="text" /><br />
密码输入框:<input type="password" value="123456" /><br />
文件上传控件:<input type="file" /><br />
单选按钮:
<input type="radio" name="radio" id="radioA" value="单选" checked/><label for="radioA">单选一</label>
<label><input type="radio" name="radio" value="不选" />单选二</label>
<br />
fieldset:设置一个分组,legend是一个标题
<fieldset>
<legend>多选框</legend>
<label><input type="checkbox" name="checkbox" value="多选一" />多选一</label>
<label><input type="checkbox" name="checkbox" value="多选二" />多选二</label>
</fieldset>
<br />
多选列表控件:
<select multiple>
<option>襄阳</option>
<option>武汉</option>
<option>长沙</option>
<option>岳阳</option>
</select>
<br />
下拉列表:
optgroup是设置一个选项分组
<select>
<optgroup label="湖北省">
<option>襄阳</option>
<option>武汉</option>
</optgroup>
<optgroup label="湖南省">
<option>长沙</option>
<option>岳阳</option>
</optgroup>
</select>
<br />
文本区:
<textarea rows="10" cols="40"></textarea>
<br />
数字输入:<input type="number" min="0" max="20" />
<br />
范围输入:
<input type="range" min="0" max="30" step="1" value="2"/>
<br />
颜色输入:
<input type="color" />
<br />
日期:
<input type="date" />
<br />
Email输入:
<input type="email" />
<br />
Tel输入:
<input type="tel" />
<br />
URL输入:
<input type="url" />
<br />
type属性为email、tel、url时,与text没太大变化,是text的一个变种。不过在移动设备上可以看出效果,比如tel值,移动设备检测到后会默认显示数字键盘
</form>
例子样式:

form表单中的常用控件的更多相关文章
- 响应式的账号登录界面模板完整代码,内置form表单和js控件
响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...
- Vue Element Form表单时间验证控件使用
如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...
- ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...
- Form表单中method为get和post的区别
序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...
- 深入浅出ExtJS 第四章 表单与输入控件
4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...
- B/S一些小知识及常用控件
一: B/S网页的运行 页面在设计的时候,本身就是一个类.在运行的时间,是一个对象. 其中aspx和aspx.cs是在同一个类下. aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑. 呈现 ...
- C# 常用控件属性及方法介绍
C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox ...
- form表单中的id 与name的区别
以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...
- C#常用控件的属性以及方法(转载)
-----以前看别人的,保存了下来,但是忘了源处,望见谅. C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichText ...
随机推荐
- Largest Number
Given a list of non negative integers, arrange them such that they form the largest number. For exam ...
- flume+kafka+smart数据接入实施手册
1. 概述 本手册主要介绍了,一个将传统数据接入到Hadoop集群的数据接入方案和实施方法.供数据接入和集群运维人员参考. 1.1. 整体方案 Flume作为日志收集工具,监控一个文件目录或者一 ...
- 原生javascript里jsonp的实现原理
ajax不能跨域,jsonp可以跨域 跨域的核心思想: 调用(拿到的接口),定义(jsonp核心处理器)分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据 ) ...
- 一个简单的linux线程池(转-wangchenxicool)
线程池:简单地说,线程池 就是预先创建好一批线程,方便.快速地处理收到的业务.比起传统的到来一个任务,即时创建一个线程来处理,节省了线程的创建和回收的开销,响应更快,效率更高. 在linux中,使用的 ...
- C++实现不能被继承的类——终结类 分类: C/C++ 2015-04-06 14:48 64人阅读 评论(0) 收藏
1. 问题 C++如何实现不能被继承的类,即终结类.Java中有final关键字修饰,C#中有sealed关键字修饰,而C++目前还没有类似的关键字来修饰类实现终结类,需编程人员手动实现. ...
- Qt之阴影边框(转)
原文地址:http://blog.sina.com.cn/s/blog_a6fb6cc90101eoc7.html 阴影边框很常见,诸如360以及其他很多软件都有类似效果,了解CSS3的同学们应该都知 ...
- (转) 坚持完成这套学习手册,你就可以去 Google 面试了
坚持完成这套学习手册,你就可以去 Google 面试了 系统 指针 value Google 面试 阅读6138 本文为掘金投稿,译文出自:掘金翻译计划 原文地址:Google Interv ...
- dubbo 转
http://blog.csdn.net/zhiguozhu/article/details/50517513 背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式 ...
- Maven学习3-使用Maven构建项目
转自:http://www.cnblogs.com/xdp-gacl/p/4240930.html maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使用maven构建项 ...
- [solr] - IKAnalyzer 分词加入
1.下载IK Analyzer中文分词器:http://ik-analyzer.googlecode.com/files/IK%20Analyzer%202012FF_hf1.zip 2.解压出zip ...