<form action="http://www.baidu.com" method="post"  autocomplete="on" style="width: 300px;padding:20px 20px;">
<fieldset name="basic">
<legend>基本信息</legend>
用户名:<input type="text" name="name" id="username" autofocus placeholder="请输入用户名" /><p>
密码:<input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off" /><p>
血型:<input type="text" name="xuexing" list="xx"/><p>
出生年月:<input type="date" name="birthday"/><p>
邮箱:<input type="email" name="email"/><p>
喜欢的颜色:<input type="color" name="color"/><p>
今天是第几周:<input type="week" name="week"/><p>
今天是第几月:<input type="month" name="month"/><p>
最喜欢的数字:<input type="number" name="number" max="9" min="0" step="1" /><p>
<input type="submit" name="ok" id="ok" value="提交">&nbsp;&nbsp;&nbsp;
<input type="reset" name="reset" id="reset" value="重置">
</fieldset>
<datalist id="xx">
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
<option value="T">特殊血型</option>
</datalist>
</form>

H5中新增的表单属性:autofocus(获得焦点)、placeholder(给出提示信息)、list(类似下拉列表)、autocomplete(有记录的话会自动出现记录信息)input元素:color(颜色选择器) date(日期选择器) time(时间选择器) datetime-local(本地时间日期选择器) week(周) month(月) email(E-mail输入框) url(URL输入框) tel(只能输入电话号码的输入框) range(拖动条) search(搜索关键字的文本框) number(数值输入框) 实验了一下,电脑上的IE浏览器基本特殊的都不支持。火狐浏览器color date email number都能支持。下面是效果图:

form&input的更多相关文章

  1. HTML 表单和输入<form><input>

    HTML <form> 标签 定义和用法: <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. ...

  2. $(#form :input)与$(#form input)的区别

    相信大家都很奇怪这两者的区别 我从两个方面简单介绍下 1. $("form :input") 返回form中的所有表单对象,包括textarea.select.button等    ...

  3. [转]对form:input标签中的数字进行格式化

    原文地址:https://blog.csdn.net/qq_29662201/article/details/80708373 数字进行格式化(保留2位小数) 单独使用<fmt:formatNu ...

  4. springMvc <form:form>标签 <form:input>标签需要注意的问题

    在用springMVC <form:form>表单时,喜欢报的错误如下所示: 错误的Controller层的代码如下: @RequestMapping(value = "test ...

  5. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  6. form:input 标签使用

    <form:input path="suplier" htmlEscape="false" maxlength="50" id=&qu ...

  7. form input file 图片上传360IE兼容问题

    <form action="" class="form-box" class="form_box" enctype="mul ...

  8. [PHP] 03 - Form & Input

    PHP 完整表单实例 一.表单示范 二.对应代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf- ...

  9. html 常用标签 a form input 标签 等等等

    前端HTML   HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk ...

  10. 关于form/input 的autocomplete="off"属性

    转自:http://blog.sina.com.cn/s/blog_b49f96a701019m0d.html 一. 有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input ...

随机推荐

  1. GCC G++ Make CMake自我科普

    Linux下gcc g++ make cmake 联系和区别 C/C++程序从编写到可执行一般经历这几个阶段 编写源代码 编译器编译代码生成目标文件,如.o文件 链接器链接目标文件和其他目标文件/库文 ...

  2. Py基础+中级

    原文 Py学习博客 1:https://www.cnblogs.com/fu-yong/p/8060198.html2:while True:just do it 三.Python的默认编码 ▷pyt ...

  3. mysql5.5和5.6版本更新内容

    mysql 5.5,5.6 比5.1改进地方: 1,5.5默认存储引擎为innodb2,5.5增加cpu多核处理能力:innodb_read_io_threads innodb_write_io_th ...

  4. 高级I/O函数

    给套接口上的I/O设置超时 1.调用alarm,在调用超过指定时间时产生SIGALARM信号,这涉及到信号处理,而且可能和进程中其他的alarm冲突 2.使用select阻塞在等待I/O上,selec ...

  5. caffe特征提取/C++数据格式转换

    Caffe生成的数据分为2种格式:Lmdb 和 Leveldb 它们都是键/值对(Key/Value Pair)嵌入式数据库管理系统编程库. 虽然lmdb的内存消耗是leveldb的1.1倍,但是lm ...

  6. MyBatis源码分析(各组件关系+底层原理

    MyBatis源码分析MyBatis流程图 下面将结合代码具体分析. MyBatis具体代码分析 SqlSessionFactoryBuilder根据XML文件流,或者Configuration类实例 ...

  7. element table 组件内容换行方案

    element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...

  8. 动态规划——Buyer

    题目链接 题目描述 哆啦A梦班级举办个party,当然吃的东西必不可少,哆啦A梦负责采购任务,他得到了一份清单,上面注明不同食品的受欢迎程度,哆啦A梦需要用一定的价钱尽可能达到的更大的受欢迎程度!例如 ...

  9. js常用正则表达式大全--如:数字,字符等

    一.校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9 ...

  10. 实现el-dialog的拖拽,全屏,缩小功能

    基于el-dialog, 封装了一下.,实在懒得写,所以直接把代码 粘出来了 大概粘了一下效果.自己体会把. 组件使用 <el-dialog v-dialogDrag ref="xhz ...