本文内容

             认识表单
             基本元素的使用
             表单高级元素的使用
             现学现卖——创建用户反馈表单

★  认识表单

     表单主要用于手机网页上浏览者的相关信息。其标签为<form></form>。表单的基本语法格式如下:
  1. <form action="url" method="get | post" enctype="mime">
  2. ......
  3. </form>
  4. //action="url"指定处理提交表单的格式,它可以是一个URL地址或者一个电子邮件地址;
  5. //method="get | post"指明提交表单的HTTP方法;
  6. //enctype=mine指明用来把表单提交给服务器时的互联网媒体形式;
       表单是一个能够包含表单元素的区域。通过添加不同的表单元素,将显示不同的效果。
 

★ 基本元素的使用

     △ 单行文本输入框text的使用
文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,例如用户姓名和地址等
  1. <input type="text" name="..." size="..." maxlength="..." value="...">
  2. //type="text"定义单行文本框;
  3. //name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  4. //size属性定义文本框的宽度,单位是单个字符宽度;
  5. //maxlength属性定义最多输入的字符数;
  6. //value属性定义文本框的初始值;
     △  多行文本输入框textarea的使用
多行文本输入框(textarea)主要用于输入较长的文本信息。
  1. <textarea name="..." cols="..." rows="..." wrap="hard | soft">
  2. </textarea>
  3. //name属性定义多行文本框的名称,同样的要保证数据的准确采集,必须定义一个独一无二的名字;
  4. //cols(即column的缩写,加s表示复数形式)属性定义多行文本框的宽度(可理解为列数)。rows属性定义文本行的高度(可理解为行数)。cols与rows的单位都是单个字符宽度;
  5. //wrap属性规定当在表单中提交时,文本区域中的文本如何换行。
  6. //wrap="soft"表示当在表单中提交时,textarea 中的文本不换行,是默认值;
  7. //wrap="hard"当在表单中提交时,textarea 中的文本换行(包含换行符)。需要注意的是,当使用 "hard" 时,必须规定 cols 属性。
    △  密码域password的使用
密码输入是一种特殊的文本区域,主要用于属于一些保密信息。当网页浏览者输入文本时,显示的是黑点或者其他符号,这样就增加了文本的安全性。
  1. <input type="password" name="..." size="..." maxlength="...">
  2. //type="password"定义密码框
  3. //name属性定义密码框的名称,同样的要保证数据的准确采集,必须定义一个独一无二的名字
  4. //size属性定义密码框的宽度,单位是单个字符宽度
  5. //maxlength属性定义最多输入的字符数
     △   单选按钮radio的使用
单选按钮主要是让网页浏览者在一组选项里面只能选择一个选项。
  1. <input type="radio" name="..." value="...">
  2. //type="radio" 定义单选按钮;
  3. //name属性定义单选按钮的名称,同样的要保证数据的准确采集,必须定义一个独一无二的名字;
  4. //value属性定义单选按钮的值;
  5. //注意,如果是同一组的单选项,那么他们的name属性必须相同,域值(value必须不同)
示例   性别的选取
  1. <input type="radio" name="sex" value="male">男
  2. <input type="radio" name="sex" value="female">女
  3. <!--name属性必须一致,保证了两个单选项为同一组,value值一般为不同-->
    △  复选框checkbox的使用
复选框主要是让网页浏览者在一组选项里可以同时选择多个选项。每个复选框都是一个独立单元,都必须要有唯一的name。
  1. <input type="checkbox" name="..." value="...">
  2. //type="checkbox"定义复选框;
  3. //name属性定义复选框的名称;
  4. //value属性定义复选框的值;
  5. //注意!!!在同一组的复选框,name属性值必须相同;
    △  下拉列表框select的使用
下拉列表框主要用于在有限的空间里设置多个选项。下拉列表既可以用作单选,也可以用作复选。
  1. <select name="..." size="..." multiple>
  2. <option value="..." selected>...</option>
  3. </select>
  4. //name属性定义下拉列表框的名称;
  5. //size规定下拉列表中可见选项的数目;
  6. //multiple属性表示可以多选,若不设置该属性,那么只能够单选;
  7. //value属性定义选择项的值;
  8. //selected属性表示默认已经选择本选项;
提示:
多选的实现方式可以把 multiple 属性与 size 属性配合使用,来定义可见选项的数目。但对用户更友好的方式是使用复选框;
当使用multiple进行多选时,
  • 对于 windows:按住 Ctrl 按钮来选择多个选项
  • 对于 Mac:按住 command 按钮来选择多个选项
 
    △  普通按钮button的使用
普通按钮用来控制其他定义了处理脚本的处理工作。
  1. <input type="button" name="..."value="..." onClick="...">
  2. //type="button"定义普通按钮;
  3. //name属性定义普通按钮的名称;
  4. //value属性定义按钮的显示文字
  5. //onClick属性表示单击行为;
 
    △  提交按钮submit的使用
提交按钮用来将输入的信息提交到服务器。
  1. <input type="submit" name="..." value="...">
  2. //通过提交按钮submit可以将表单里的信息提交给表单里action所指向的文件。
 
   △  重置按钮reset的使用
重置按钮用来重置表单中输入的信息。
  1. <input type="reset" name="..." value="...">
注意:点击重置按钮,将会把reset按钮所在的表单中的填写数据全部清空。
 

★  表单高级元素的使用

表单中常见的高级元素包括,URL,email,time,range,search等。但是IE 9.0浏览器对这些高级元素的支持并不是很好。
提示:用户可以使用普通属性设置url输入框,例如使用max属性设置其最大值,min属性设置其最小值,step属性设置合法的数字间隔,value属性设置默认的属性值。)
    △  url属性的应用
url属性适用于说明网站网址的。显示为一个文本字段输入URL地址,在提交表单时,会自动验证url的值。
  1. <input type="url" name="userUrl">
   △  email属性的应用
与url属性类似,email属性用于让浏览者输入email地址。在提交表单时,会自动验证email域的值。
  1. <input type="email" name=userEmail>
   △  date属性和time属性的应用
在HTML 5中,新增一些日期和时间输入的类型,包括date,datetime,datime-local,month,week和time。

时间和日期输入类型

属性

含义

date

选取日,月,年

month

选取月,年

week

选取周,年

time

选取时间

datetime

选取时间,日,月,年

datetime-local

选取时间,日,月,年(本地时间)

  1. <input type="date" name=testDate>
§ 注意:Chrome浏览器仅对datetime的支持并不好,但对其他时间和日期的支持比较好。
 
   △  number属性的应用
number属性提供了一个数字的输入类型。用户可以直接输入数字或者通过单击微调框中的向上或者向下按钮选择数字。
  1. <input type="number" name="testNumber" step="5">
  2. //step="5"属性表示填入的数字都是5的公倍数;
 
   △  range属性的应用
range属性是显示一个滚动的控件。和number属性一样,用户可以使用max,min和step属性控制控件的范围。
  1. <input type="range" name="testRange" min="0" max="10">
  2. //在默认情况下,滑块位于滚动轴的中间位置,且min=0,max=100;
  3. //目前大部分浏览器对这一属性还不能很好的支持。
   △   required属性的应用
required属性规定必须在提交之前填写输入域(不能为空)。required属性适用于以下类型的输入属性:text,search,url,email,password,date,picker,number,checkbox和radio等。
  1. <input type="text" name="userTxt" required="required">
  2. //required也可以直接写required
 

现学现卖

       创建用户反馈表单
实现代码
  1. <style>
  2. h2 {
  3. text-align: center;
  4. }
  5. input{
  6. margin:8pxauto;
  7. }
  8. </style>
  9. <h2>
  10. 用户反馈表单
  11. </h2>
  12. <hr/>
  13. <form>
  14. 姓&nbsp;&nbsp;名:<input type="text" name="userName"><br/>
  15. 性&nbsp;&nbsp;别:<input type="radio" name="userSex" value="male">男<input type="radio" name="userSex" value="female">女<br/>
  16. 年&nbsp;&nbsp;龄:<input type="number" min="1" max="110" name="userAge" style="size: 200px;"><br/>
  17. 联系电话:<input type="text" name="userTel"><br/>
  18. 电子邮件:<input type="email" name="userEmail"><br/>
  19. 联系地址:<input type="text" name="userAddress"><br/>
  20. 请在此处填写你的建议<br/><textarea cols="50" rows="20"></textarea>
  21. <input type="submit" value="提交">
  22. <input type="reset" value="重填">
  23. </form>
 

 
 
 

 

HTML5表单元素的学习的更多相关文章

  1. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  2. html5-5 HTML5表单元素和内嵌框架

    html5-5   HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...

  3. HTML5: HTML5 表单元素

    ylbtech-HTML5: HTML5 表单元素 1.返回顶部 1. HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <ke ...

  4. Html5 表单元素基础

    表单元素 1.定义: 表单是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具.(邮箱注册,用户登录,调查问卷等) 2.表单元素(下拉框,输入框……) 3.表单主结构: <fo ...

  5. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  6. HTML 表单 / HTML5 表单元素datalist

    <form> 属性的列表: 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...

  7. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

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

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

  9. HTML5 总结-表单-表单元素

    HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input typ ...

随机推荐

  1. ASP lable标签显示过长,自动换行。

    <asp:Label ID="lab_BeforPostR" runat="server" CssClass="labSty" Wid ...

  2. Window bat expdp 定时任务逻辑备份 定时删除N天前的旧文件

    点击进入:Linux shell crontab expdp 定时任务逻辑备份 定时删除旧文件 首先建一个备份数据库用批处理文件,内容如下: rem expdp sz set sz_file=SZ_% ...

  3. 【转】如何判断Javascript对象是否存在

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...

  4. [论文笔记] 一种Java遗留系统服务化切分和封装方法 (计算机学报, 2009)

    李翔,怀进鹏,曾晋,高鹏. 一种Java遗留系统服务化切分和封装方法. 计算机学报, 32(9), 2009, p1084-1815 (gs:5) 1. 本文研究从Java遗留系统中切分并封装出Web ...

  5. saiku之行速度优化(三)

    经历了前两轮优化之后,saiku由不可使用,优化到可以使用,不过在分析大量日志数据的时候,还有顿卡的感觉!继续观察背后执行的Sql,决定将注意力关注到索引上面! 日志的主要使用场景是:固定日期维度的数 ...

  6. Java实现动态代理的两种方式

    http://m.blog.csdn.net/article/details?id=49738887

  7. managed_shared_memory.construct造成的性能损失

    boost中的IPC进程间通信非常好用,可以直接在共享内存上创建对象,相当于new分配器,实测发现它的分配算法还是有点耗时.第一个测试代码仅仅分配一次,然后频繁的复制,每秒钟可以复制4200次左右. ...

  8. nginx 常用配置说明

    一.location 配置 1.1 语法规则: location [=|~|~*|^~] /uri/ { … }= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可 ...

  9. php XML 读写 创建

    一 .XML 读 1.1. 首先同目录定义好一个XML文件 : book.xml <?xml version="1.0" encoding="utf-8" ...

  10. Qt5 从头学(2)--手动构建HelloWold

    在上一篇随笔中已经搭建好了Qt5的的开发环境,并且通过Qt Creator自动构建了一个视窗程序.在这篇文章中我们将手动编写一个HelloWold程序,简单了解一下Qt的构建过程.这里我们不会涉及到Q ...