技术标签： 前端入门 前端 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>
文章浏览阅读6.9k次，点赞5次，收藏35次。基于模板匹配的数字识别，将标准的8*16像素的数字0123456789读取，二值化，对每个数字进行等分区域分割，统计每个区域内的黑色像素点的个数，即为特征初值。采用欧式距离的模板匹配法。z//基于模板匹配的数字识别#include#include#include#include #includeusing namespace std; int main()_基于模板匹配的数字电表数字识别
文章浏览阅读7.2k次，点赞11次，收藏74次。Python代码的编写运行方式详解_python安装好后怎么写代码
文章浏览阅读1.2k次。VS Code配置Code runner_vscode无法识别gcc
文章浏览阅读1.5w次，点赞10次，收藏14次。Unity3D中使用mesh collider和box collider的区别踩坑过程记录。设备是HTC的VIVE 和 Unity 5.xCPU: Intel Xeon Silver 4116 * 2GPU: NVIDIA Quadro P6000RAM: 64GB这个问题是在解决项目卡顿问题的同时出现的：最近在用U3D做一个VR项目，需求是要给网格加碰撞体以实现获取手柄射线与..._mesh collider和box collider
文章浏览阅读4.7k次。问题场景问题一：后端项目jar包打包上传运行，终端上正常，终端退出后，项目未能运行。问题二：第二次上传jar包并运行时提示该端口被占用。解决方法问题一：使用nohub命令启动jar包。nohup java -jar 1.0.0.jar &问题二：由于两次使用的同一个端口，先查找到当前端口正在运行的进程的进程号。netstat -lnp|grep 端口号然后用杀掉进程..._centos启动jar包不显示端口占用
文章浏览阅读3.9k次，点赞6次，收藏39次。MySql高级—视图、函数、存储过程、触发器目录 一、视图 11、视图的定义 1 2、视图的作用 1 （1）可以简化查询。 1 （2）可以进行权限控制， 3 3、查询视图 4 4、修改视图 4 5、删除视图 4_触发器 存储过程 函数 视图
文章浏览阅读130次。WSGI协议首先弄清下面几个概念：WSGI：全称是Web Server Gateway Interface，WSGI不是服务器，python模块，框架，API或者任何软件，只是一种规范，描述web server如何与web application通信的规范。server和application的规范在PEP 3333中有具体描述。要实现WSGI协议，必须同时实现web server和..._python uwsgi 和pywsgi
文章浏览阅读399次。一，简单介绍KNN算法---就是获取临近点，范围内，哪一种点最多（例如：红点：6，黑点：2，未知点肯定是红点），就是属于最多一方定义样本，拥有四个样本,已知A区两点分别（2,5）和（1,4），B区（8,1）和（9,2），求灰点（4,3）属于哪一区？代码定义实体类/** * 定义数据和数据类型 * @author peng * */ private s..._jf.knn-%; 9 &
文章浏览阅读8.9k次，点赞2次，收藏9次。对于ffmpeg的配置请看我的上篇博客：http://blog.csdn.net/kuaile123/article/details/11367309所用视频为 flv格式的，用的vs2010，电脑为64位，下面的也是64位，别下错了。因为ffmpeg的函数和版本有关系，这里记录下我所用的整合的版本，是昨天下的最新版的，需要请下载http://download.csdn.n_从视频中获取flag
在直接映射缓存中，每个内存地址通过某种映射函数（通常是地址的一部分）映射到一个特定的缓存行。这种结构简单，硬件实现成本较低，但可能会导致较高的缓存冲突（两个内存地址映射到同一缓存行），从而降低缓存效率。在介绍直接映射之前，以停车场停车作为例子，先把结构的特点简单地概括出来，便于读者了解。
持续学习，跟进Objective-C的最新发展和技术。了解Objective-C的基本语法和编程概念。掌握Objective-C的高级特性和常用框架。应用所学知识，完成实际项目。
设R为G的所有生成树的集合，若T为R中边的权值之和最小的生成树，则T称为G的最小生成树（MST）。每次选则一条权值最小的边，使这条边的两头连通（原本已经连通的不选），直到所有结点都连通。，生成树不同，每棵树的权（即树中所有边上的权值之和）也可能不同。1.最小生成树可能有多个，但边的权值之和总是唯一且最小的；每次将代价最小的新顶点纳入生成树，直到所有顶点都纳入为止。数组，找到最小值，将其加入树中，并继续遍历与其相连的边。数组，初始为false，判断结点是否加入树。最低的，且还没加入树的顶点。