表单验证+获取元素的三种方式

简介: 表单验证+获取元素的三种方式

JavaScript单词


onclick:点击事件

onmouseout:鼠标离开事件

onmouseover:鼠标移上去事件

onload:页面加载事件

onblur:失去焦点


表单验证


这个可以直接用,你们可以再加一点css样式就可以运用到项目当中,效果就是上面那张图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
  <body>
  <form action="http://www.baidu.com" method="post">
    用户名:<input type="text" /><br>
    密码:<input type="password" /><br>
    性别:<input name="sex" type="radio" />男
    <input checked="true" type="radio" name="sex" />女<br>
    爱好:
    <input name="like" type="checkbox" />吃饭饭
    <input name="like" type="checkbox" />睡觉觉
    <input name="like" type="checkbox" />打豆豆
    <input name="like" type="checkbox" />打打球<br>
    地址:
    <select>
    <option>北京</option>
    <option>南京</option>
    <option>东京</option>
    <option selected="selected">岛市</option>
    </select>
    <br />
    个性签名:
    <textarea>
    </textarea>
    <br>
    <button>普通按钮</button>
    <input type="button" value="普通按钮" />
    <input type="reset" value="重置按钮" />
    <input type="submit" value="提交按钮" />
    <input type="file" />
    <input type="image" src="images/zsd.JPG" />
  </form>
  </body>
</html>


获取元素的三种方式


获取ID单个元素

document.getElementById();

根据标签名获取元素

document.getElementBTagName();

根据标签name属性获取元素

document.getElementsByName('name属性值');
相关文章
|
6月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
JavaScript 数据格式
JS中操作表单元素与正则表达式校验表单
JS中操作表单元素与正则表达式校验表单
73 0
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
56 0
|
7天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
173 0
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
72 0
|
6月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
JavaScript 前端开发
Javascript知识【jQuery:查找元素操作&案例:模拟用户分组】
Javascript知识【jQuery:查找元素操作&案例:模拟用户分组】
|
JavaScript API
如何使用jQuery处理表单元素?底层原理是什么?
如何使用jQuery处理表单元素?底层原理是什么?
104 0
|
前端开发 算法 JavaScript
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现
阅读使人充实,会谈使人敏捷,写作使人精确。 ——培根
146 0
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现