HTML5表单元素的学习
本文内容
★ 认识表单
<form action="url" method="get | post" enctype="mime">
......
</form>
//action="url"指定处理提交表单的格式,它可以是一个URL地址或者一个电子邮件地址;
//method="get | post"指明提交表单的HTTP方法;
//enctype=mine指明用来把表单提交给服务器时的互联网媒体形式;
★ 基本元素的使用
<input type="text" name="..." size="..." maxlength="..." value="...">
//type="text"定义单行文本框;
//name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
//size属性定义文本框的宽度,单位是单个字符宽度;
//maxlength属性定义最多输入的字符数;
//value属性定义文本框的初始值;
<textarea name="..." cols="..." rows="..." wrap="hard | soft">
</textarea>
//name属性定义多行文本框的名称,同样的要保证数据的准确采集,必须定义一个独一无二的名字;
//cols(即column的缩写,加s表示复数形式)属性定义多行文本框的宽度(可理解为列数)。rows属性定义文本行的高度(可理解为行数)。cols与rows的单位都是单个字符宽度;
//wrap属性
规定当在表单中提交时,文本区域中的文本如何换行。//wrap="soft"表示当在表单中提交时,textarea 中的文本不换行,是默认值;
//wrap="hard"当在表单中提交时,textarea 中的文本换行(包含换行符)。需要注意的是,当使用 "hard" 时,必须规定 cols 属性。
<input type="password" name="..." size="..." maxlength="...">
//type="password"定义密码框
//name属性定义密码框的名称,同样的要保证数据的准确采集,必须定义一个独一无二的名字
//size属性定义密码框的宽度,单位是单个字符宽度
//maxlength属性定义最多输入的字符数
<input type="radio" name="..." value="...">
//type="radio" 定义单选按钮;
//name属性定义单选按钮的名称,同样的要保证数据的准确采集,必须定义一个独一无二的名字;
//value属性定义单选按钮的值;
//注意,如果是同一组的单选项,那么他们的name属性必须相同,域值(value必须不同)
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<!--name属性必须一致,保证了两个单选项为同一组,value值一般为不同-->
<input type="checkbox" name="..." value="...">
//type="checkbox"定义复选框;
//name属性定义复选框的名称;
//value属性定义复选框的值;
//注意!!!在同一组的复选框,name属性值必须相同;
<select name="..." size="..." multiple>
<option value="..." selected>...</option>
</select>
//name属性定义下拉列表框的名称;
- //size规定下拉列表中可见选项的数目;
- //multiple属性表示可以多选,若不设置该属性,那么只能够单选;
- //value属性定义选择项的值;
- //selected属性表示默认已经选择本选项;
- 对于 windows:按住 Ctrl 按钮来选择多个选项
- 对于 Mac:按住 command 按钮来选择多个选项
<input type="button" name="..."value="..." onClick="...">
//type="button"定义普通按钮;
//name属性定义普通按钮的名称;
//value属性定义按钮的显示文字
//onClick属性表示单击行为;
<input type="submit" name="..." value="...">
//通过提交按钮submit可以将表单里的信息提交给表单里action所指向的文件。
<input type="reset" name="..." value="...">
★ 表单高级元素的使用
<input type="url" name="userUrl">
<input type="email" name=userEmail>
时间和日期输入类型
属性 |
含义 |
date |
选取日,月,年 |
month |
选取月,年 |
week |
选取周,年 |
time |
选取时间 |
datetime |
选取时间,日,月,年 |
datetime-local |
选取时间,日,月,年(本地时间) |
<input type="date" name=testDate>
<input type="number" name="testNumber" step="5">
//step="5"属性表示填入的数字都是5的公倍数;
<input type="range" name="testRange" min="0" max="10">
//在默认情况下,滑块位于滚动轴的中间位置,且min=0,max=100;
//目前大部分浏览器对这一属性还不能很好的支持。
<input type="text" name="userTxt" required="required">
//required也可以直接写required
现学现卖
<style>
h2 {
text-align: center;
}
input{
margin:8pxauto;
}
</style>
<h2>
用户反馈表单
</h2>
<hr/>
<form>
姓 名:<input type="text" name="userName"><br/>
性 别:<input type="radio" name="userSex" value="male">男<input type="radio" name="userSex" value="female">女<br/>
年 龄:<input type="number" min="1" max="110" name="userAge" style="size: 200px;"><br/>
联系电话:<input type="text" name="userTel"><br/>
电子邮件:<input type="email" name="userEmail"><br/>
联系地址:<input type="text" name="userAddress"><br/>
请在此处填写你的建议<br/><textarea cols="50" rows="20"></textarea>
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>

HTML5表单元素的学习的更多相关文章
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
- HTML5: HTML5 表单元素
ylbtech-HTML5: HTML5 表单元素 1.返回顶部 1. HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <ke ...
- Html5 表单元素基础
表单元素 1.定义: 表单是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具.(邮箱注册,用户登录,调查问卷等) 2.表单元素(下拉框,输入框……) 3.表单主结构: <fo ...
- html5表单元素详解
表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...
- HTML 表单 / HTML5 表单元素datalist
<form> 属性的列表: 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...
- HTML5 学习08——Input 类型、表单元素及属性
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- HTML5 总结-表单-表单元素
HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input typ ...
随机推荐
- ASP lable标签显示过长,自动换行。
<asp:Label ID="lab_BeforPostR" runat="server" CssClass="labSty" Wid ...
- Window bat expdp 定时任务逻辑备份 定时删除N天前的旧文件
点击进入:Linux shell crontab expdp 定时任务逻辑备份 定时删除旧文件 首先建一个备份数据库用批处理文件,内容如下: rem expdp sz set sz_file=SZ_% ...
- 【转】如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- [论文笔记] 一种Java遗留系统服务化切分和封装方法 (计算机学报, 2009)
李翔,怀进鹏,曾晋,高鹏. 一种Java遗留系统服务化切分和封装方法. 计算机学报, 32(9), 2009, p1084-1815 (gs:5) 1. 本文研究从Java遗留系统中切分并封装出Web ...
- saiku之行速度优化(三)
经历了前两轮优化之后,saiku由不可使用,优化到可以使用,不过在分析大量日志数据的时候,还有顿卡的感觉!继续观察背后执行的Sql,决定将注意力关注到索引上面! 日志的主要使用场景是:固定日期维度的数 ...
- Java实现动态代理的两种方式
http://m.blog.csdn.net/article/details?id=49738887
- managed_shared_memory.construct造成的性能损失
boost中的IPC进程间通信非常好用,可以直接在共享内存上创建对象,相当于new分配器,实测发现它的分配算法还是有点耗时.第一个测试代码仅仅分配一次,然后频繁的复制,每秒钟可以复制4200次左右. ...
- nginx 常用配置说明
一.location 配置 1.1 语法规则: location [=|~|~*|^~] /uri/ { … }= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可 ...
- php XML 读写 创建
一 .XML 读 1.1. 首先同目录定义好一个XML文件 : book.xml <?xml version="1.0" encoding="utf-8" ...
- Qt5 从头学(2)--手动构建HelloWold
在上一篇随笔中已经搭建好了Qt5的的开发环境,并且通过Qt Creator自动构建了一个视窗程序.在这篇文章中我们将手动编写一个HelloWold程序,简单了解一下Qt的构建过程.这里我们不会涉及到Q ...