<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. ML:流形学习

    很多原理性的东西需要有基础性的理解,还是篇幅过少,所以讲解的不是特别的清晰. 原文链接:http://blog.sciencenet.cn/blog-722391-583413.html 流形(man ...

  2. System.Windows.Forms.WebBrowser中 处理 js 脚本 window.Open 禁止新建窗口 的方法

    wb 是 拖放在窗体上的 System.Windows.Forms.WebBrowser 在你的窗体代码中定义 SHDocVw.WebBrowser_V1 wb1; 在 你窗体的 load 事件中 加 ...

  3. codeforces 789 B. Masha and geometric

    链接 B. Masha and geometric depression 题意 给你一个等比数列的首项和公比q,然后给出一个上限l,m个数字,在这个等比数列里,小于l且没有在m个数字里面出现过的可以写 ...

  4. 安装oracle执行runInstaller文件时报错:“……/install/.oui:Permission denied”

    一:问题描述 二:出错原因 将windows下未解压的Oracle安装软件上传到了linux服务器,导致有三个文件的执行权限丢失. 三:解决方法 为其赋予相应权限即可. 1: [root@MyPc ~ ...

  5. JS 封装一个判断闰年平年的方法 aa(nian)

    nn(2017) function nn (nian){ if(nian%4 == 0 && nian%100 !== 0 || nian%400 ==0 ) { alert(&quo ...

  6. win10更新后程序路径盘符变成*星号解决方法

    发现这个问题是当我在命令行里输入java -version时提示 找不到*:\Program Files\Java...之类的 怎么好好的D:\Program Files\Java变成了*:\Prog ...

  7. Alios-Things的学习与使用(1)

    目录 Alios-Things的学习与使用 1.简介 1.1 为什么要学alios-Things 2. 环境搭建 2.1 使用docker toolbox安装docker 2.2 测试使用dockde ...

  8. 【2018集训队互测】【XSY3372】取石子

    题目来源:2018集训队互测 Round17 T2 题意: 题解: 显然我是不可能想出来的……但是觉得这题题解太神了就来搬(chao)一下……Orzpyz! 显然不会无解…… 为了方便计算石子个数,在 ...

  9. javascript 富文本 注意事项

    富文本编辑器 div内嵌iframe iframe body contenteditable属性 true 整个iframe 即为可编辑框,创建时注意事项: 1.编辑 焦点问题 弹出新控件时为控件设置 ...

  10. mobile touch 备用

    var _scrollIndex=1; function scrollPage(){ var _contentEle = $('.view-container'),_viewEle = _conten ...