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 ...
随机推荐
- Python 基礎 - bytes數據類型
三元運算 什麼是三元運算?請看下圖說明 透過上圖說明後,可以得出一個三元運算公式: result = 值1 if 條件 else 值2, 如果鯈件為真: result = 值1 如果鯈件為假: res ...
- 新的理念、 新的解决方案、 新的Azure Stack技术预览
Jeffrey Snover 我们很高兴地宣布︰Azure Stack Technical Preview 2(TP2)已发布!我们朝着向您的数据中心提供Azure服务能力的目标又更近一步.自发布第一 ...
- H5版俄罗斯方块(5)---需求演进和产品迭代
前言: 产品的形态是不断迭代的, 从粗糙到精致, 从简易到立体. 有了最初的技术积累和时间思考后, 终于明确了该游戏的方向. 我想说的是: 技术不是重点, 产品/用户体验才是核心议题. 结合朋友的游戏 ...
- webpack 代码拆分,按需加载
转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campai ...
- 升级vs工程到vs2010(以上)工程找不到OutputDebugStr报错
原因是不同版本的系统宏的不同导致报错,OutputDebugStr,它在vs2005的头文件里定义在vs安装目录下的平台sdk目录下的mmsysytem.h, 而到vs2013下这个文件被放到了系统目 ...
- 综合使用union和limit区分结果并限制返回结果集的条数
limit , 这里的limit限制了返回的union(合并)后的结果集,
- 自动选中div中的文字
<html> <head> <title></title> <script type="text/javascript" de ...
- 030. asp.net中DataList数据绑定跳转(两种方式)的完整示例
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...
- Sedgewick的红黑树
红黑树一直是数据结构中的难点,大部分关于算法与数据结构的学习资料(包括<算法导论>)对于这部分的讲解都是上来就下定义,告诉我们红黑树这个性质那个性质,插入删除要注意1234点,但是基本没有 ...
- JTAG和SWD连接关系图
经实际测试 SWD最少接线方法: 1.VTref与Vsupply短接 2.JLINK的SWDIO与目标板SWDIO相连 3.JLINK的SWCLK与目标板SWCLK相连 4.JLINK任意一个GND与 ...