原则:能让用户选择的决不填写,增加用户体验

表单(form)元素格式

<input type="text" name="fname" value="text"/>

   input元素类型     input元素名称   input元素的值
表单语法
属性 说明
type

指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认值为text

name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength type为text或password时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否是被选中

 2.表单(form)

<form method=”post” action=”#”>
<p><input name=”” type=”” value=””></p>
</form>

3.文本框填写text

<input type=”text”>

用户名:<input type="text" name="username" size="15"/>

效果图:

4.单选列表

<input type=”radio”>
<p><input type="radio" name="xuan">自动登录
<input type="radio" name="xuan">SSL
</p>

效果图:

5.多选列表

<input type=”checkbox”>
<p>
爱好1:<input type="checkbox" name="sport" checked/>运动
      <input type="checkbox" name="book" checked/>看书
   <input type="checkbox" name="sleep" checked/>睡觉
</p>

效果图:

6.下拉列表

<select name=”” size=””>
<option name=””></option>
<option name=””></option>
</select>
<p>
爱好2:
<select name="intrest" multiple>
<option value="sport">运动动</option>
<option value="game">游戏戏</option>
<option value="sleep">睡觉觉</option>
<option value="eat">吃饭饭</option>
</select>
</p>

效果图:

 <p>
生日:<select name="year">
<option name="1991" selected>1991</option>
<option name="1991">1992</option>
<option name="1991">1993</option>
</select>年
<select name="mouth">
<option name="1">1</option>
<option name="2">2</option>
<option name="3" selected>11</option>
</select>月
<select name="day">
<option name="1">1</option>
<option name="2">2</option>
<option name="3" selected>30</option>
</select>日
</p>

效果图:

7.多行文本输入

<form method=”post” action=”#” enctype=”multipart/form-data”>
<textarea name=”” rows=”” cols=””/>
</form>
<p>
简历:
<textarea name="introduce" cols="20" rows="10">个人简历</textarea>
</p>

效果图:

8.文件域

<input type=”file” name=””/>

<p>
文件上传:
<input type="file" name="file"/>
</p>

效果图:

9.邮箱输入

<input type=”email”>

<p>
电子邮箱:<input type="email" name="email"/>
</p>

效果图:

10.网址输入

<input type=”url”>

11.数字输入

<input type=”number”>

<p>
月薪:<input type="number" name="money"/>
</p>

效果图:

12.滑块

<input type=”range” min=”” max=”” step=””/>

13.搜索

<input type=”search”/>

14.按钮框

<input type=”submit” value=”提交”/>
<input type=”reset” value=”重置”/>
<input type=”button” value=”按钮”/>
<input type=”image” src=”path”/>

15.隐藏域

<input type=”hidden” value=”” name=””>

16.只读框体

<readonly>

<p>
电子邮箱:<input type="email" name="email" value="ali@aliyun.com.cn" readonly maxlength="50"/>
</p>

效果图:

17.禁用按钮

<disable>

<p>
我现在:<select name="check" disabled>
<option name="0">请选择身份</option>
<option name="1">医生</option>
<option name="2">老师</option>
</select>(非常重要)
</p>

效果图:

18.框体内提示文字

<palceholder=”空间内提示文字”>
  • input类型的文本框提供一种提示(hint)
  • 可以描述文本框期待用户输入何种内容
  • 提示语默认显示,当文本框中输入内容时提示语消失
  • 适合于input标签:text、search、url、email、和password等类型
<p>
姓名:<input type="text" name="uname" placeholder="输入必须是2-6个字符"/>
</p>

效果图:

19.控件必填

<required>
<p>
姓名:<input type="text" name="uname" required placeholder="输入必须是2-6个字符"/>
</p>

效果图:

20.按某种规则填写

<pattern=”正则表达式”>
<p>密码:
<input type="password" name="pass" required pattern="[\dA-Za-z]{6,16}">长度为6-16个字符
</p>

效果图:

21.自动聚焦

<autofocus>

HTML5表单_form的更多相关文章

  1. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  2. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

  3. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  4. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  5. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  7. HTML5表单提交和PHP环境搭建

    HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建

  8. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  9. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

随机推荐

  1. 时钟分组的用法---Clock Groups

    时钟分组的用法---Clock Groups 哪些时钟互相之间需要分组 同步时钟: 异步时钟: 不确定的时钟: 即使是从同一个MMCMs出来的时钟,有可能为不确定关系的时钟,如果它们之间的相位没有一个 ...

  2. QThread的一些使用心得

    qthread这个类主要用于解决pyqt中多线程的问题,常见用法是将后台代码封装在该类的run()方法中,再对qthread对象执行start()函数来启动线程. 但往往一个业务会有粒度划分,多个粒度 ...

  3. 关于APS在企业生产计划上的应用

    本人本身是一个码农,已经服务了共和国各项事业(好像是说得有点漂,没办法段子看多了)大约一半工作时候了(按60岁退休的话),从一线的小码农,到现在成了老农,出产了不少或优或劣的各种码,几乎啥都做过.近几 ...

  4. LDAP认证模式简介

    今天发现公共服务中有ldap数据库服务,先大概了解一下ldap,转载下面的文章.原文链接:https://www.jianshu.com/p/d3f8c8f5d661 另外记录一篇文章地址:https ...

  5. android ButterKnife 点击事件没反应的解决方案

    可能只添加了 implementation 'com.jakewharton:butterknife:8.8.1'而没有添加下面这行 annotationProcessor 'com.jakewhar ...

  6. sqlserver 带输出参数的存储过程的创建与执行

    创建 use StudentManager go if exists(select * from sysobjects where name='usp_ScoreQuery4') drop proce ...

  7. 涨姿势:Java 分业务、分级别实现自定义日志打印

    自定义日志级别 通常的日志框架都有以下几个级别,从低到高TRACE,DEBUG,INFO,WARN,ERROR,FATAL. 默认情况,假如我们定义日志打印级别INFO,它会把大于等于INFO级别的日 ...

  8. python http请求及多线程应用

    目录 概述 tomorrow包准备 运行环境遇到的问题 其他尝试未果 概述 今天, 使用python3 模拟下发包, http get 请求, 然后 采用tomorrow 多线程. 代码如下: # c ...

  9. [ExcelHome]VLOOKUP的别样用法

    请看题: 如上图所示,是某小区多名业主的信息表.如诸君所见,A列是业主的姓名,B列是一些有趣的信息,要求在C列,使用VLOOKUP函数,提取出B列的手机号码. B列的信息真是奇葩,除了手机号码,还有职 ...

  10. java之try、catch、finally

    结论:try和catch相当于程序分支,finally块中不会改变变量的指针(引用地址):和final修饰的变量类似. public class Test { public static AreaRQ ...