技术标签： 前端入门 前端 html javascript
<body>
<!--
获取表单(前两种常用)
1.document.getElementById("id属性值");
通过表单的id属性值获取属性对象
2.document.表单的name属性值;
通过表单的name属性值获取表单对象
3.document.forms[下标]
通过指定下标获取表单元素
4.document.forms[表单的name属性值获取];
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
-->
<form id="myform1" name="myform1" action=""></form>
<form id="myform2" name="myform2" action=""></form>
<script type="text/javascript">
// 1.document.getElementById("id属性值");
console.log(document.getElementById("myform1"));
// 2.document.表单的name属性值;
console.log(document.myform2);
// 获取所有的表单对象
console.log(document.forms);
// 3.document.forms[下标];
console.log(document.forms[0]);
// 4.document.form[表单的name属性值];
console.log(document.forms['myform2']);
</script>
</body>
<meta charset="utf-8">
<title>获取表单元素</title>
</head>
<body>
<!--
获取表单元素
1.获取input元素
1.document.getElementById("id属性值");
通过元素的id属性值获取表单元素对象
2.表单对象.表单元素的name属性值;
通过表单对象中对应的元素的name属性值获取
3.document.getElementsByName("name属性值");
通过表单元素的name属性值获取
4.document.getElementByTagName("标签名/元素名");
通过标签名获取表达单元素对象
2.获取单选按钮
注:相同的一组单选按钮,需要设置相同的name属性值
1.document.getElementByName("name属性值");
name属性值获取
2.判断单选按钮是否选中
checked 选中状态
在JS代码中
checked=true 表示选中
check=false 表示不选中
在HTML标签中
checked=checked或checked 表示选中
不设置checked属性 表示不选中
3.获取单选按钮的值
元素.value;
3.获取多选按钮
与单选按钮相同
4.获取下拉框对象
1.获取下拉框对象
var 对象 = document.getElementById("id属性值");
2.获取下拉框的下拉选项列表
var options = 下拉框对象.options;
3.获取下拉框被选中项的索引
var index = 下拉框对象.selectedIndex;
4.获取下拉框被选中项的值
var 值 = 下拉框对象.value;
5.通过选中项的下标获取下拉框被选中项的值
var 值 = 下拉框对象.options[index].value;
6.获取下拉框被选中项的文本
var 文本值 = 下拉框对象.options[index].text;
注:
1.获取下拉框选中项的值时:(value)
如果option标签设置了value属性值,则获取value属性对应的值;
如果option标签未设置value属性值,则获取的是option双标签中的文本值
2.下拉框的选中状态
选中状态:selected=selected 或 selected 或 selected=true
未选中状态:不设置selected属性 或 selected=false
-->
<form id="myform" name="myform" action="" method="get">
<!-- 文本框 -->
姓名：<input type="text" name="uname" id="uname" value="zs" /><br>
<!-- 密码框 -->
密码：<input type="password" id="upwd" name="upwd" value="1234"><br>
<!-- 隐藏域 -->
<input type="hidden" id="uno" name="uno" value="隐藏域" />
<!-- 文本域 -->
个人说明：<textarea name="intro"></textarea><br>
<!-- 按钮 -->
<button type="button" onclick="getTxt();">获取元素内容</button><br>
<hr ><br>
<input type="text" name="inputName" id="test" value="aaa" />
<input type="radio" class="test" name="rad" id="test" value="1" /> 男
<input type="radio" class="test" name="rad" id="test" value="2" /> 女
<button type="button" onclick="getRadio()">获取单选按钮</button><br>
<hr ><br>
全选/全不选: <input type="checkbox" id="control" onclick="checkAllOrNot()">
<button type="button" onclick="checkFan()">反选</button><br>
<input type="checkbox" name="hobby" value="sing" /> 唱歌
<input type="checkbox" name="hobby" value="dance" /> 跳舞
<input type="checkbox" name="hobby" value="rap" /> 说唱
<button type="button" onclick="geCheckBox()">获取多选按钮</button>
<hr ><br>
来自:
<select id="ufrom" name="ufrom">
<option value ="-1">请选择</option>
<option value ="0" selected="selected">北京</option>
<option value ="1">上海</option>
</select><br>
<button type="button" onclick="getSelect()">获取下拉选项</button>
</form>
<script type="text/javascript">
// 获取元素内容
function getTxt(){
// 1.document.getElementById("id属性值");
var uname = document.getElementById("uname").value;
console.log(pwd);
// 2.表单对象.表单元素的name属性值;
var pwd = document.getElementById("myform").upwd.value;
console.log(pwd);
// 3.document.getElementsByName("name属性值");
var uno = document.getElementsByName("uno")[0].value;
console.log(uno);
// 4.document.getElementsByTagName("标签/元素名");
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
// 获取单选按钮
function getRadio(){
// 通过name属性值获取单选按钮
/* var radios = document.getElementsByName("rad");
// 判断并遍历
if (radios != null && radios.length > 0 ){
// 遍历
for (var i = 0 ; i < radios.length; i++) {
console.log("值:"+radios[i].value+",是否选中:"+radios[i].checked);
}
}
*/
// 通过class属性值获取
var cla = document.getElementsByClassName("test");
console.log(cla);
if(cla != null && cla.length > 0 ){
for(var i=0; i<cla.length ;i++){
// 判断input元素的类型 type
if( cla[i].type == "text" ){
// 文本框
console.log("文本框的值:"+cla[i].value);
}else if(cla[i].type == "radio"){
console.log("值:"+cla[i].value+",是否选中:"+cla[i].checked);
}
}
}
}
function checkAllOrNot(){
}
// 反选
function checkFan(){
// 通过复选框的name属性值获取
var checkboxs = document.getElementsByName("hobby");
//判断
if (checkboxs != null && checkboxs.length > 0 ) {
// 遍历
for(var i = 0; i < checkboxs.length; i++) {
// 设置选中状态 (取反)
checkboxs[i].checked = !checkboxs[i].checked;
}
}
}
function geCheckBox(){
}
function getSelect(){
}
</script>
</body>
<body>
<!--
提交表单
一.使用普通按钮 type="button"
1.给按钮绑定click点击事件,绑定函数
2.在函数中,进行表单校验(非空校验\合法性校验等)
3.如果校验通过,则手动提交表单
表单对象.submit();
二.使用提交按钮 type="submit"
1.给按钮绑定click点击事件,绑定函数
2.函数需要有返回值,返回true或者false(如果return false,则表单不会提交,如果return true或不return则仍然提交)
οnclick="return 函数名()"
3.在函数中进行表单校验(非空校验,合法性校验等)
4.如果校验通过返回true;如果校验不通过,则返回false
三.使用表单提交 type="submit"
1.给表单form元素绑定submit提交事件,绑定函数
2.函数需要有返回值,返回true或者false(如果return false,则表单不会提交,如果return true或不return则仍然提交)
onsubmit = "return 函数名()"
3.在函数中进行表单校验(非空校验,合法性校验等)
4.如果校验通过返回true;如果校验不通过,则返回false
-->
<!-- 使用普通按钮 type="button" -->
<form id="myform" name="myform" action="http://www.baidu.com" method="get">
姓名:<input name="uname" id="uname" />
<span id="msg" style="font-size: 16px; color: orangered;"></span><br>
<button type="button" onclick="submitForm1()">提交</button>
</form>
<hr>
<!-- 使用提交按钮 type="submit" -->
<form id="myform2" name="myform2" action="http://www.baidu.com" method="get">
姓名:<input name="uname2" id="uname2" />
<span id="msg2" style="font-size: 16px; color: orangered;"></span><br>
<button type="submit" onclick="return submitForm2()">提交</button>
</form>
<hr>
<!-- 使用提交按钮 type="submit" -->
<form id="myform3" name="myform3" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()">
姓名:<input name="uname3" id="uname3" />
<span id="msg3" style="font-size: 16px; color: orangered;"></span><br>
<button type="submit">提交</button>
</form>
<script type="text/javascript">
/*
表单校验
提交表单
*/
function submitForm1(){
// 得到文本框的值
var uname = document.getElementById("uname").value;
//判断是否为空
if( isEmpty(uname) ){
//为空
// 设置提示信息(设置span元素的值)
document.getElementById("msg").innerHTML = "*姓名不能为空!";
// 阻止表单提交
return;
}
// 手动提交表单
document.getElementById("myform").submit();
}
/**
* 使用提交按钮 type="submit"
* 按钮绑定提交事件
*/
function submitForm2(){
// 得到文本框的值
var uname = document.getElementById("uname2").value;
//判断是否为空
if( isEmpty(uname) ){
//为空
// 设置提示信息(设置span元素的值)
document.getElementById("msg2").innerHTML = "*姓名不能为空!";
// 阻止表单提交
return false;
}else{
return true;
}
// 手动提交表单
document.getElementById("myform2").submit();
}
/**
* 使用提交按钮 type="submit"
* 表单绑定提交事件
*/
function submitForm3(){
// 得到文本框的值
var uname = document.getElementById("uname3").value;
//判断是否为空
if( isEmpty(uname) ){
//为空
// 设置提示信息(设置span元素的值)
document.getElementById("msg3").innerHTML = "*姓名不能为空!";
// 阻止表单提交
return false;
}else{
return true;
}
// 手动提交表单
document.getElementById("myform3").submit();
}
/**
* 判断字符串是否为空
* 如果为空,返回true
* 如果不为,返回false
*
* trim(): 字符串方法,去除字符串前后空格
* @param {Object} str
*/
function isEmpty(str){
// 判断是否为空
if(str == null || str.trim() == "") {
return true;
}
return false;
}
</script>
</body>
文章浏览阅读331次。第一部分：准备工作1 安装虚拟机2 安装centos73 安装JDK以上三步是准备工作，至此已经完成一台已安装JDK的主机第二部分：准备３台虚拟机以下所有工作最好都在root权限下操作1 克隆上面已经有一台虚拟机了,现在对master进行克隆,克隆出另外2台子机;1.1 进行克隆21.2 下一步1.3 下一步1.4 下一步1.5 根据子机需要,命名和安装路径1.6 ..._创建一个hadoop项目
文章浏览阅读1.7k次。心脏滴血漏洞HeartBleed CVE-2014-0160 是由heartbeat功能引入的，本文从深入码层面的分析该漏洞产生的原因_heartbleed代码分析
文章浏览阅读1.4k次。前言ofd是国家文档标准，其对标的文档格式是pdf。ofd文档是容器格式文件，ofd其实就是压缩包。将ofd文件后缀改为.zip，解压后可看到文件包含的内容。ofd文件分析工具下载：点我下载。ofd文件解压后，可以看到如下内容： 对于xml文件，可以用文本工具查看。但是对于印章文件(Seal.esl)、签名文件(SignedValue.dat)就无法查看其内容了。本人开发一款ofd内容查看器，..._signedvalue.dat
文章浏览阅读1.8w次，点赞29次，收藏313次。整体系统设计本设计主要是对ADC和DAC的使用，主要实现功能流程为：首先通过串口向FPGA发送控制信号，控制DAC芯片tlv5618进行DA装换，转换的数据存在ROM中，转换开始时读取ROM中数据进行读取转换。其次用按键控制adc128s052进行模数转换100次，模数转换数据存储到FIFO中，再从FIFO中读取数据通过串口输出显示在pc上。其整体系统框图如下：图1：FPGA数据采集系统框图从图中可以看出，该系统主要包括9个模块：串口接收模块、按键消抖模块、按键控制模块、ROM模块、D.._基于fpga的信息采集
文章浏览阅读2.5w次。1.背景错误信息：-- [http-nio-9904-exec-5] o.s.c.n.z.filters.post.SendErrorFilter : Error during filteringcom.netflix.zuul.exception.ZuulException: Forwarding error at org.springframework.cloud..._com.netflix.zuul.exception.zuulexception
文章浏览阅读358次。1.介绍图的相关概念 图是由顶点的有穷非空集和一个描述顶点之间关系-边（或者弧）的集合组成。通常，图中的数据元素被称为顶点，顶点间的关系用边表示，图通常用字母G表示，图的顶点通常用字母V表示，所以图可以定义为: G=(V,E)其中，V(G)是图中顶点的有穷非空集合，E(G)是V(G)中顶点的边的有穷集合1.1 无向图：图中任意两个顶点构成的边是没有方向的1.2 有向图：图中..._给定一个邻接矩阵未必能够造出一个图
文章浏览阅读321次。（十二）、WDS服务器安装通过前面的测试我们会发现，每次安装的时候需要加域光盘映像，这是一个比较麻烦的事情，试想一个上万个的公司，你天天带着一个光盘与光驱去给别人装系统，这将是一个多么痛苦的事情啊，有什么方法可以解决这个问题了？答案是肯定的，下面我们就来简单说一下。WDS服务器，它是Windows自带的一个免费的基于系统本身角色的一个功能，它主要提供一种简单、安全的通过网络快速、远程将Window..._doc server2012上通过wds+mdt无人值守部署win11系统.doc
文章浏览阅读219次。python–xlrd/xlwt/xlutilsxlrd只能读取，不能改,支持 xlsx和xls 格式xlwt只能改，不能读xlwt只能保存为.xls格式xlutils能将xlrd.Book转为xlwt.Workbook，从而得以在现有xls的基础上修改数据，并创建一个新的xls，实现修改xlrd打开文件import xlrdexcel=xlrd.open_workbook('E:/test.xlsx') 返回值为xlrd.book.Book对象,不能修改获取sheett_xlutils模块可以读xlsx吗
文章浏览阅读8.2w次，点赞267次，收藏656次。运行Selenium出现'WebDriver' object has no attribute 'find_element_by_id'或AttributeError: 'WebDriver' object has no attribute 'find_element_by_xpath'等定位元素代码错误，是因为selenium更新到了新的版本，以前的一些语法经过改动。..............._unresolved attribute reference 'find_element_by_id' for class 'webdriver
文章浏览阅读198次。一：模态窗口//父页面JSwindow.showModalDialog(ifrmehref, window, 'dialogWidth:550px;dialogHeight:150px;help:no;resizable:no;status:no');//子页面获取父页面DOM对象//window.showModalDialog的DOM对象var v=parentWin..._jquery获取父window下的dom对象
文章浏览阅读1.7w次，点赞15次，收藏129次。算法（algorithm）是解决一系列问题的清晰指令，也就是，能对一定规范的输入，在有限的时间内获得所要求的输出。 简单来说，算法就是解决一个问题的具体方法和步骤。算法是程序的灵 魂。二、算法的特征1.可行性 算法中执行的任何计算步骤都可以分解为基本可执行的操作步，即每个计算步都可以在有限时间里完成（也称之为有效性） 算法的每一步都要有确切的意义，不能有二义性。例如“增加x的值”，并没有说增加多少，计算机就无法执行明确的运算。 _算法
文章浏览阅读1.5k次，点赞18次，收藏26次。网络安全的标准和规范是网络安全领域的重要组成部分。它们为网络安全提供了技术依据，规定了网络安全的技术要求和操作方式，帮助我们构建安全的网络环境。下面，我们将详细介绍一些主要的网络安全标准和规范，以及它们在实际操作中的应用。_网络安全标准规范