<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. redis-persist上线

    九月份惨不忍睹,因为代码质量不够高,直接被Boss喷成了筛子.被反复教育说要高质量的代码,要可维护.高性能…… 幸而,最后一周终于在紧张的加班中,灰度上线redis-land-go了,项目也改名为re ...

  2. Linux Kernel Version Numbering

    Because there are numerous revisions and releases of the Linux kernel and new ones are developed at ...

  3. python数据结构与算法——二叉树结构与遍历方法

    先序遍历,中序遍历,后序遍历 ,区别在于三条核心语句的位置 层序遍历  采用队列的遍历操作第一次访问根,在访问根的左孩子,接着访问根的有孩子,然后下一层 自左向右一一访问同层的结点 # 先序遍历 # ...

  4. 一个共享内存hash

    Background 我们的多进程程序碰到一个需求:做key-value查询,然后拿获取到的value去做一些事情.这些key-value存储在很多词典文件中,数量级>10w,如果每个进程都加载 ...

  5. python知识点记录(一):

    1.如何使print输出不换行: 在print语句末尾加上一个英文逗号. 2.安装第三方模块时,用pip和easy_install是一样的.下载一个setuptools.exe安装好就有easy_in ...

  6. QTreeWidget创建

    QTreeWidget.顾名思义,这个类用来展示树型结构.同前面说的QListWidget类似,这个类需要同另外一个辅助类QTreeWidgetItem一同使用.不过,既然是提供方面的封装类,即便是看 ...

  7. SQL 查询某个表被哪些存储过程使用到

    --1.查询某个表被哪些存储过程使用到 : select distinct object_name(id) from syscomments where id in (select object_id ...

  8. Linux下*.tar.gz文件解压缩命令

    1.压缩命令: 命令格式:tar  -zcvf   压缩文件名.tar.gz   被压缩文件名 可先切换到当前目录下.压缩文件名和被压缩文件名都可加入路径. 2.解压缩命令: 命令格式:tar  -z ...

  9. iOS8通讯录之联系人增删查,多号码增删操作

    #import <AddressBook/AddressBook.h> #pragma mark 删除一个号码 - (void)deleteLocalMarkSuccess:(void(^ ...

  10. c#数据类型之值类型和引用类型

    C#数据类型分隔为值类型和引用类型.而所用数据类型都继承自Object. 1. 值类型继承自System.ValueType,引用类型继承自System.Object.ValueType也直接继承自O ...