H5_ 表单及其他新增和改良元素
1.
form属性
formaction属性
formmethod属性
formenctype属性
formtarget属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5form</title>
</head>
<body>
<div class="content">
<form action="" id="testfrom">
<input type="text">
</form>
<textarea name="" id="" cols="30" rows="10" form="textarea">表单内元素的form属性</textarea> <p>formaction属性：将表单提交到不同的页面</p>
<form action="server.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
</form> <p>formmethod属性：对每个表单元素指定不同的提交方法</p>
<form action="">
姓名：<input type="text" name="name" formmethod="post" value="post提交方式"><br>
<input type="submit" value="get提交方式" frommethod="get">
</form> <p>formenctype属性对表单元素分别指定不同的编码方式</p>
<input type="text" formenctype="multipart/form-data"> <p>formtarget属性指定提交后在何处打开所需要加载的页面</p>
<p>autofocus属性：页面打开后，控件自动获取光标焦点（注意：一个页面只能有一个控件具有autofocus属性）</p>
<input type="text" autofocus>
</div>
<script> </script>
</body>
</html>
2.
labels属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>labels属性</title>
</head>
<body>
<form action="" id="testfrom">
<label for="txt_name" id="label">姓名：</label>
<input type="text" id="txt_name">
<input type="button" id="btnValidate" value="验证">
</form>
<script>
var page = {
init : function(){
this.bindEvent();
},
bindEvent : function(){
var _this = this,
button = document.getElementById('btnValidate');
button.onclick = function(){
_this.validate();
}
},
validate : function(){
var txtName = document.getElementById('txt_name'),
button = document.getElementById('btnValidate'),
form = document.getElementById('testfrom');
if(txtName.value.trim() === ''){
if(txtName.labels.length === 1){
var label=document.createElement('label');
label.setAttribute('for', 'txt_name');
form.insertBefore(label,button);
txtName.labels[1].innerHTML='请输入姓名';
txtName.labels[1].setAttribute(
"style","font-size:9px; color:red"
);
txtName.setAttribute(
"style","border:1px solid red"
)
}
}
else if(txtName.labels.length>1){
form.removeChild(txtName.labels[1]);
txtName.setAttribute(
"style","border:1px solid #ccc"
)
}
}
}
window.onload = page.init();
</script>
</body>
</html>
3.
label标签的control属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label标签的control属性</title>
</head>
<body>
<p>
H5中,可以再标签label元素内部放置表单元素，并且通过该标签的control属性来访问该表单元素。
eg：通过label的control属性设置input的value
</p>
<form action="">
<label for="txt_zip" id="label">
邮编：
<input type="text" id="txt_zip" maxlength="6">
<small>请输入六位数字</small>
</label>
<input type="button" value="设置默认值" id="setValue">
</form>
<script>
var page = {
init : function(){
this.bindEvent();
},
bindEvent : function(){
var _this = this,
btn = document.getElementById('setValue');
btn.onclick = function(){
_this.setValue();
}
},
setValue : function(){
var label = document.getElementById('label'),
textbox = label.control;
textbox.value = '123456';
},
//这里直接通过获取input id设置value值。
// setValue : function(){
// var ipt = document.getElementById('txt_zip');
// ipt.value = '123456';
// }
}
window.onload = page.init();
</script>
</body>
</html>
4.
placeholder属性
autocomplete属性
pattern属性
SelectionDirection属性
复选框 indeterminate属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
<style>
/* 设置placeholder样式 从 Firefox 19 开始将不再支持一个冒号的「:-moz-placeholder」伪元素，改成标准的两个冒号的「::-moz-placeholder」。今后若要兼容，开发者需要在CSS中同时书写两个伪元素。*/ /* Firefox浏览器 */
input::-moz-placeholder{
color :blue;
}
/* 更早之前的Firefox浏览器版本 */
input:-moz-placeholder{
color :blue;
}
/* webkit系列浏览器 */
input::-webkit-input-placeholder{
color :blue;
}
</style>
</head>
<body>
<p>placeholder属性</p>
<input type="text" placeholder="input me">
<p>文本框的list属性,autocomplete属性</p>
<div class="list">
text: <input type="text" name="greeting" list="grreetings" autocomplete="on">
<datalist id="grreetings" style="display: none;">
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</datalist>
</div>
<p>pattern属性：设置正则表达式</p>
<form action="">
指定格式：<input type="text" pattern="^[0-9]{2,3}$" name=part>
<input type="submit">
</form>
<p>input,textarea的SelectionDirection:获取用户用鼠标选取文字时，该属性可以获取选取的方向</p>
<form action="">
<input type="text" name='text'>
<input type="button" value="click_me" id="SDBtn">
</form>
<div class="checkboxDiv">
<p>复选框具有选取，非选取，不明三种状态</p>
<input type="checkbox" indeterminate id='cb'>indeterminate Test
</div>
<script>
var page = {
init : function(){
this.bindEvent();
},
bindEvent : function(){
var SDBtn = document.getElementById('SDBtn');
SDBtn.onclick = function(){
var control = document.forms[1]['text'],
Direction = control.selectionDirection;
alert(Direction);
} var cb = document.getElementById('cb');
cb.indeterminate = true;
// cd.checked = true;
//检测复选框状态
if(cb.indeterminate){
alert("不明状态");
}
else if(cb.checked){
alert("选取状态");
}
else{
alert("非选取状态");
} }
}
window.onload = page.init();
</script>
</body>
</html>
H5_ 表单及其他新增和改良元素的更多相关文章
- html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素
一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
- html5表单及新增的改良元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 从零开始学 Web 之 HTML5（二）表单，多媒体新增内容，新增获取操作元素，自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 当一个页面中有多个form表单并且有重名的元素时，js获取指定form表单中的指定元素
有时候我们会在一个页面中写了多个form表单,碰巧多个form表单中又有相同名称的元素,而我们又不想改名字,这个时候就能用到 $("#form1 #div1").val() 好玩吧 ...
- 疯狂的表单-html5新增表单元素和属性
疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...
- html5--3.17 新增的表单重写
html5--3.17 新增的表单重写 学习要点 对form元素的属性做一个小结,对个别属性进行一点补充 重点掌握新增的表单重写 form元素的属性小结 action/method/enctype/n ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1
HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1 autocomplete属性 autocomplete属性规定form或inp ...
- 了解HTML表单之form元素
前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...
- 表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
随机推荐
- JAVA进阶17
---恢复内容开始--- 间歇性混吃等死,持续性踌躇满志系列-------------第17天 1.递归结构 递归是一种常见的解决问题的方法,即把问题逐渐简单化.递归的基本思想就是自己就是“自己调用自 ...
- LeetCode第十六题-找出数组中三数之和最接近目标值的答案
3Sum Closest 问题简介: 给定n个整数的数组nums和整数目标,在nums中找到三个整数,使得总和最接近目标,返回三个整数的总和,可以假设每个输入都只有一个解决方案 举例: 给定数组:nu ...
- P5304 [GXOI/GZOI2019]旅行者
题目地址:P5304 [GXOI/GZOI2019]旅行者 这里是官方题解 一个图 \(n\) 点 \(m\) 条边,里面有 \(k\) 个特殊点,问这 \(k\) 个点之间两两最短路的最小值是多少? ...
- C#学习笔记——MDI窗体（多文档界面）
1.设置父窗体: 如果要将某个窗体设置为父窗体,只需将该窗体的IsMdiContainer属性设置为True即可. 2.设置子窗体: 通过设为某个窗体的MdiParent属性来确定该窗体是那个窗体的子 ...
- Linux代理搭建TinyProxy
操作系统:阿里云CentOS 7.4 64位 安装方法: yum install tinyproxy 配置: vi /etc/tinyproxy/tinyproxy.conf Port 8888 // ...
- 【Linux】常见基础命令之系统操作
linux现在基本上已成为面试的必考题目,特此总结一些常用的基础命令. cd:切换目录 lilip@ubuntu:~$ cd /home/lilip/test pwd:打印当前目录 lilip@ubu ...
- js数据结构与算法——队列
<script> //创建一个队列 function Queue(){ let items = []; //向队尾添加一个新的项 this.enqueue = function(eleme ...
- 【彻底解决】django migrate (mysql.W002) 【专治强迫症】
cmd中使用python3 manage.py migrate命令,报warn,很多人都遇到过 解决办法: settings.py文件夹加入DATABASES['OPTIONS']['init_com ...
- js变量传递
基本类型.引用类型 基本类型: undefined.Null.Boolean.Number.String五种 (简单的数据段);引用类型: object (由多个值构成). 两种类型在使用上的区别: ...
- 【svn】本地文件夹同步到SVN
本地代码上传至SVN 起因: 我在开发项目代码时往往在本地开发很久,在基本功能完成时才上传svn,添加版本控制. 做法: 右键 TortoiseSVN - Repo browser 在希望项目存储的根 ...