H5表单基础知识(二)
表单新增属性
<!--<input type="text" class="name" />-->
<!--
placeholder:提示文字(占位符)
autofocus:自动获取焦点
autocomplete: 自动完成(填充的) on 开启(默认) off 取消自动提示
required: 必填
multiple: 多选
novalidate:关闭默认的验证功能(只能加给form)
pattern: 自定义正则验证
pattern="1\d{10}"
-->
<!--<form action="" novalidate>-->
<form action="" >
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名:<input type="text" placeholder="例如:李狗蛋" autofocus name="userName" autocomplete="on" required/>
</label>
<label for="">
电话:<input type="tel" pattern="1\d{10}" />
</label>
<!-- 上次文件-->
<input type="file" name="file" multiple/>
<input type="submit" />
</fieldset>
</form>
表单事件
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱:<input type="email" name="" id="txt1"/>
</label>
<label for="">
密码:<input type="text" name="" id="txt2"/>
</label>
<input type="submit" />
</fieldset>
</form>
<script>
//表单事件: oninput 当用户输入的时候
// oninvalid 当验证不通过是触发
var txt1=document.getElementById('txt1');
var txt2=document.getElementById('txt2');
var num=0;
txt1.oninput=function(){
num++;
// 将字数显示在txt2中
txt2.value=num;
}
// oninvalid 当验证不通过是触发
// 一般用于设置验证不通过时的 提示文字
txt1.oninvalid=function(){
// 用于设置验证不通过时的 提示文字
this.setCustomValidity('亲,请输入正确的邮箱格式!');
}
</script>
类名操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;
height: 100px;
margin:10px auto;
border: 1px solid #000;
}
.active{
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box box1 "></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div> <button>切换</button> <script>
var box1=document.querySelector('.box1'); // box1.className="";
// juqery
// addClass() removeClass() hasClass() toggleClass(); // h5新增的操作类名的方式 和jq一样好用 var box1= document.querySelector('.box1');
// 添加类名
box1.classList.add('active');
// alert('ok');
// 删除类名
// box1.classList.remove('active');
// contains:包含
// 判断是否包含某个类名 返回结果 true/false
var f=box1.classList.contains('active'); console.log(f); // 切换类名
document.querySelector('button').onclick=function(){
document.querySelector('.box3').classList.toggle('active');
} //
</script>
</body>
</html>
自定义属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="zs" data-content="我是一个div">div</div>
<!-- made-in-china-->
<script>
var box=document.querySelector('.box');
// js里面的自定义属性
// box.index=100; // console.log(box.className);
// console.log(box.title); // 如何获取标签的自定义属性
// console.log(box.dataname);
// 自定义的属性 需要通过 dateset[]方式来获取 // console.log(box.dataset['content']); // 设置自定义属性的值 var num=100;
num.index=10;
box.index=100;
box.dataset['content']='aaaa';
// data-my-name="zs" 如何获取
console.log(box.dataset['myName']); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 标签</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} .tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
} .tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
} nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
} nav a:last-child {
border-right: 0 none;
} nav a.active {
background-color: #9BAF9B;
} .cont {
overflow: hidden;
display: none;
} .cont ol {
line-height: 30px;
} </style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local" >
<ol>
<li>河感在生矿难,死伤在全10</li>
<li>禽流感在感在广1处继续蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广在全国暴发</li>
<li>禽流感在全国多处继续蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>河南再次发生矿难,死伤人数超过100</li>
<li>禽流感次发生蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广减产绝收发</li>
<li>禽流感在全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>333河南再次发生矿难,死伤人数超过100</li>
<li>禽流感在全国多处农作物农延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
<li>禽流感在全农作物继续蔓延,温家宝指示</li>
<li>南方大农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>
<li>四川原副省长李成云被查 5年前曾违纪又复出</li>
<li>胡歌反对粉丝探班:以前请吃饭现在会黑脸</li>
<li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>
<li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
<li>国子监大街门匾现错字 已悬挂近10年(图)</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
</div>
<script>
// 目标: 默认显示一个 当前的样式
// 点击导航,实现切换
// key 表示的当前显示的是第几个 (function(key){
// 获取所有的导航
var navs=document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件,并且添加当前样式
for(var i=0;i<navs.length;i++){
// 如果是用户指定的当前样式
if(key==i){
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId=navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#'+secId).style.display='block';
} // 给每一个导航绑定点击事件
navs[i].onclick=function(){
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav=document.querySelector('.active');
// 获取对应的内容区域 ,让其隐藏
var currentId=currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#'+currentId).style.display='none'; // 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId=this.dataset['cont'];
document.querySelector('#'+myId).style.display='block';
}
} })(0); </script>
</body>
</html>
自定义属性-tab栏操作
H5表单基础知识(二)的更多相关文章
- 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本
在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...
- easyUI表单基础知识
easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...
- form表单基础知识
form 元素是块级元素 ------------------- ------------------- ----------------------------------------------- ...
- form 表单基础知识
<form method=" name="one" action="http://www.battlenet.com.cn/zh/"> & ...
- [SQL]SQL Server数据表的基础知识与增查删改
SQL Server数据表的基础知识与增查删改 由张晨辉(学生) 于19天 前发表 | 阅读94次 一.常用数据类型 .整型:bigint.int.smallint.tinyint .小数:decim ...
- java 基础知识二 基本类型与运算符
java 基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...
- 菜鸟脱壳之脱壳的基础知识(二) ——DUMP的原理
菜鸟脱壳之脱壳的基础知识(二)——DUMP的原理当外壳的执行完毕后,会跳到原来的程序的入口点,即Entry Point,也可以称作OEP!当一般加密强度不是很大的壳,会在壳的末尾有一个大的跨段,跳向O ...
- H5表单
H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...
- Javascript高级编程学习笔记(73)—— 表单(1)表单基础
表单 JS最初的一个用途就是帮助服务器分担处理表单的责任 时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分. 因为默认的表单控件很丑,所以有时候我们会使用 ...
随机推荐
- pycharm中内看内建函数的定义
鼠标方法在内建函数上,Ctrl+B,看内建函数的定义 如果想要看内置函数的具体实现细节,可以到python的lib目录下C:\Python27\Lib\,或者python的官网上 如果要看非内建的函数 ...
- Git本地仓库与远程github同步的时候提示fatal: remote origin already exists 错误解决办法
Git本地仓库与远程github同步的时候提示fatal: remote origin already exists 错误解决办法 1.git在本地的电脑创建了仓库,要远程同步github的仓库.使用 ...
- Centos7下添加Tomcat为系统服务
文章参考:点击打开链接 因为个人感觉在centos中启动tomcat比较麻烦.要一直cd到目录下面startup.sh才可以,所以网上找到将tomcat作为系统服务,使用systemctl直接启动方法 ...
- web前端----css补充
css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图片的位置(也就是设置元素 ...
- 03: Django Model数据库操作
目录:Django其他篇 01:Django基础篇 02:Django进阶篇 03:Django数据库操作--->Model 04: Form 验证用户数据 & 生成html 05:Mo ...
- 20145337《网络对抗技术》Web安全基础实践
20145337<网络对抗技术>Web安全基础实践 一.实验后回答问题 1.SQL注入攻击原理,如何防御 SQL注入攻击的本质是利用SQL语法,针对应用程序开发过程中的漏洞,从一个数据库获 ...
- Android实践项目汇报总结(下)
微博客户端的设计与实现(下) 第四章 系统详细功能实现 本应用实现了如下主要模块:程序启动模块.登录授权模块.主界面显示模块撰写发表微博模块.用户发布信息模块.软件设置模块. 4.1程序启动模块实现 ...
- 李白打酒|2014年蓝桥杯B组题解析第三题-fishers
李白打酒 话说大诗人李白,一生好饮.幸好他从不开车. 一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱: 无事街上走,提壶去打酒. 逢店加一倍,遇花喝一斗. 这一路上,他一共遇到店5次,遇到花 ...
- Stream API
引例: 1 List<String> strList = Arrays.asList("zhaojigang","nana","tiany ...
- 51nod 1083 矩阵取数问题
就很简单很简单的dp 只能从右或者从下走 所以 dp方程直接看下面公式吧 反正也不难 #include<bits/stdc++.h> using namespace std; ; in ...