<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表单中的常用控件的更多相关文章

  1. 响应式的账号登录界面模板完整代码,内置form表单和js控件

    响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...

  2. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  3. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  4. Form表单中method为get和post的区别

    序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...

  5. 深入浅出ExtJS 第四章 表单与输入控件

    4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...

  6. B/S一些小知识及常用控件

    一: B/S网页的运行 页面在设计的时候,本身就是一个类.在运行的时间,是一个对象. 其中aspx和aspx.cs是在同一个类下. aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑. 呈现 ...

  7. C# 常用控件属性及方法介绍

      C#常用控件属性及方法介绍                                               目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox ...

  8. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  9. C#常用控件的属性以及方法(转载)

    -----以前看别人的,保存了下来,但是忘了源处,望见谅. C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichText ...

随机推荐

  1. 《深入浅出Node.js》第4章 异步编程

    @by Ruth92(转载请注明出处) 第4章 异步编程 Node 能够迅速成功并流行起来的原因: V8 和 异步 I/O 在性能上带来的提升: 前后端 JavaScript 编程风格一致 一.函数式 ...

  2. [翻译]lpeg入门教程

    原文地址:http://lua-users.org/wiki/LpegTutorial 简单匹配 LPeg是一个用于文本匹配的有力表达方式,比Lua原生的字符串匹配和标准正则表达式更优异.但是,就像其 ...

  3. [读书笔记]java中的类加载器

    以下内容大多来自周志明的<深入理解Java虚拟机>. 类加载器是java的一项创新,也是java流行的重要原因之一,它最初是为了满足java applet的需求而开发出来. 什么是appl ...

  4. jq获取当前点击的li是ul中的第几个?

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  5. java文件下载

    /** * zip 导出 * @param response * @param zipName * @throws Exception */ private void outZip(HttpServl ...

  6. JS判断是否来自手机移动端的访问,并跳转

    var browserName_ = navigator.userAgent ; &&browserName_.indexOf(&&browserName_.index ...

  7. Oracle、MySql、SQLServer 数据分页查询

    最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一). mysql的分页查询 mysql的分页查询是最简单的,借 ...

  8. Python之路,day2-Python基础1

    python2 range(20) for i in range(10): print(i) range(1,10)  ----->从1开始到9 else: #如果for循环正常结束,  就执行 ...

  9. Java输入输出流(一)——常用的输入输出流

    1.流的概念:在Java中,流是从源到目的地的字节的有序序列.Java中有两种基本的流--输入流(InputStream)和输出流(OutputStream). 根据流相对于程序的另一个端点的不同,分 ...

  10. pclint vc6/linux 工程,测试正常

    下载:http://www.gimpel.compojie版搜索一下很好找 里面有vc6 和linux工程的lnt文件,实际使用可能要修改. http://files.cnblogs.com/file ...