<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. Java中将JSON格式的数据转换成对应的Bean、Map、List数据

    简单说明: 为了方便数据在客户端及服务器端的传输,有时候我们会用一些比较方便组织的数据类型,比如json.xml等传给客户端,客户端也可以重新组织数据传回服务器端.JSON和XML提供了一套比较方便的 ...

  2. Ecshop 扯淡问题

    1:解决 :在 temp 文件下创建 backup文件夹   修改权限 2:待补充...

  3. Ubuntu Server 18.04 LTS 安装

    版本:Ubuntu Server 18.04.1 LTS 环境:VMware Workstation 14 Player 下载地址:https://www.ubuntu.com/download/se ...

  4. MongoDB 学习笔记(二):shell中执行增删查改

    一.查 1.查询集合中所有文档:db.集合名.find(). 2.查询集合中第一个文档:db.集合名.findOne(). 3.指定查询条件:第一个参数就是指定查询条件 查询全部文档:db.集合名.f ...

  5. ack 工具

    ack-tools ack其实就是快速查找工具,但centos在没有这个安装包. 下载安装 cd /tmp git clone https://github.com/dongci/ack.git cd ...

  6. Shoot the Bullet ZOJ - 3229有上下界网络流

    Code: #include<cstdio> #include<algorithm> #include<vector> #include<queue> ...

  7. NGUI学习随笔

    一.NGUI的直接用法 1.      Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加.(注:用Component添加无效). 2.  ...

  8. Zookeeper分布式锁解决方案具体代码

    定义一个公共资源订单生成类: package com.itmayiedu.lock; import java.text.SimpleDateFormat; import java.util.Date; ...

  9. django rest-farme-work 的使用(1)

    Django REST框架是一个用于构建Web API的强大且灵活的工具包 您可能想要使用REST框架的一些原因: 可浏览性 身份认证 支持ORM和非ORM的序列化 良好的文档支持 安装初步 pip ...

  10. CentOs下安装图形界面

    CentOS6的图形界面对计算机的内存有要求,应该是要大于512M吧,如果不满足这个条件 在安装的时候,图形界面是不会安装的,可以在linux系统安装完毕后,进入命令后再次安装图形界面 安装图形界面有 ...