技术标签： 前端入门 前端 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>
文章浏览阅读1.1k次，点赞35次，收藏27次。VUE框架CLI组件化动态列表实现------VUE框架_vue 动态产生列表
文章浏览阅读108次。计算球体积根据输入的半径值，计算球的体积。Input输入数据有多组，每组占一行，每行包括一个实数，表示球的半径。Output输出对应的球的体积，对于每组输入数据，输出一行，计算结果保留三位小数。Sample Input11.5Sample Output4.18914.137Hint#define PI 3.1415927仍然是很简单的题，...
文章浏览阅读997次。Ping扫描-禁用端口扫描负责检查目标机是否有常见漏洞，如MS08-067。_use exploit/windows/smb/smb_doublepulsar_rce
文章浏览阅读302次。近几年随着k8s的流行，prometheus成为了一个越来越流行的监控工具，是现在重要的云原生监控平台之一，它允许企业从任何基础设施或应用组件收集和处理指标数据，用于监控容器化工作负载。数据检索worker用于发现Kubernetes中的目标，并从正在进行的作业或用于短期作业的推送网关中获取指标，然后将这些指标推送到数据库，从那里可以通过HTTP访问指标以进行查询和警报。在持久性存储中，数据被分为两个小时的块，最终进行压缩。由于它的灵活性，这些组件会因我们的具体实现而异，但是应始终包含以下的元素。_prometheus 中文文档
文章浏览阅读492次。这篇文章主要介绍了python mqtt 客户端代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下安装paho-mqttpip install paho-mqtt -i http://pypi.douban.com/simple --trusted-host pypi.douban.compython消息收发实现import paho.mqt..._python实现mqtt
文章浏览阅读2.6w次。文件夹权限问题Linux、Fedora、Ubuntu修改文件、文件夹权限的方法差不多。很多人开始接触Linux时都很头痛Linux的文件权限问题。这里告诉大家如何修改Linux文件-文件夹权限。以主文件夹下的一个名为cc的文件夹为例。 下面一步一步介绍如何修改权限： 1.打开终端。输入su(没 Linux、Fedora、Ubuntu修改文件、文件夹权限的方法差不多。很多人开始接触Lin_linux 文件夹权限 影响ftp listfles
文章浏览阅读1.2w次。3proxy是一个俄罗斯人编写的强大的代理软件，支持windows/linux/unix平台，支持网页协议文件传输协议HTTP/HTTPS/FTP代理，支持三个版本的套接字SOCKSv4/SOCKSv4.5/SOCKSv5(socks/socks.exe)代理，支持邮件协议POP3/SMTP代理，支持即时通讯协议AIM/ICQ(icqpr/icqpr.exe)代理，支持MSN 消息 / Live_windows 3proxy
文章浏览阅读572次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;_校园运动会管理系统源码
文章浏览阅读6.2k次。Keywords: Win PowerShell dir_win10运维
文章浏览阅读5.6k次，点赞6次，收藏4次。背景：windows11+anaconda3+spyder5.1.5今天给笔记本重装系统，想尝鲜直接装了win11，然后下载了最新的anaconda，自己创了环境，装了最新的spyder，第一次是在anaconda nagivator里面下载的，launch之后会自动弹出来一个CMD窗口，显示“活动代码页：936” 。spyder 虽然可以打开，但是如果关掉这个cmd窗口，spyder会闪退。然后卸载掉spyder之后尝试从anaconda promot 里面重新安装spyder ，lau._活动代码页936spyder
文章浏览阅读4.4k次，点赞3次，收藏10次。最近正研究怎么使用SublimeText3开发Python，然而对Python英文文档的阅读是一个比较头疼的问题，在AndroidStudio中有自动翻译插件ECTranslation，能方便的翻译单词和句子。因此想仿照ECTranslation，自己写一个翻译插件，正好也能加深对Python的印象。（在SublimeText3中，似乎没有特别好用的划词翻译插件）开发ST3的插件，网上只有简单的入门_sublime text 翻译
文章浏览阅读8.5k次，点赞4次，收藏19次。c语言struct用法详解在C语言中，可以使用结构体(Struct)来存放一组不同类型的数据。结构体的定义形式为：struct 结构体名{结构体所包含的变量或数组};结构体是一种集合，它里面包含了多个变量或数组，它们的类型可以相同，也可以不同，每个这样的变量或数组都称为结构体的成员(Member)。请看下面的一个例子：struct stu{char *name; //姓名int num; //..._c语言struct的作用和用法