HTML对象：html一些对象属性的介绍
发布时间：09/01 来源：未知 浏览：
关键词：
Form 对象
Form 对象办法
reset() ：把表单的所有输入元素重置为它们的默许值。
submit() ：提交表单。
Text 对象
Text 对象属性
disabled ：设定或返回文本域可否应被禁用。
readOnly ：设定或返回文本域可否应是只读的。
value ：设定或返回文本域的 value 属性的值。
Text 对象办法
focus() :在文本域上设定焦点。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input name = "wd" />
<input type="submit" value="baidu一下" onclick="sub()">
</form>
<script>
var form = document.getElementsByTagName("form")[0];
var text = document.getElementsByName("wd")[0];
text.focus();
function sub(){
var text = document.getElementsByName("wd")[0];
// text.value = "魔道";
// text.readOnly = "true";
// console.log(text.readOnly);
// text.disabled = "true";
console.log(text.disabled);
text.focus();
}
//type为text、password、textarea的标签均有value、focus、disabled、readOnly
</script>
</body>
</html>Radio 对象
Radio 对象属性
checked ：设定或返回单选按钮的状态。
disabled ：设定或返回可否禁用单选按钮。
value ：设定或返回单选按钮的 value 属性的值。
Checkbox 对象
Checkbox 对象属性
checked ：设定或返回 checkbox 可否应被选中。
disabled ：设定或返回 checkbox 可否应被禁用。
value ：设定或返回 checkbox 的 value 属性的值
Select 对象
Select 对象汇合
options[] ：返回包括下拉列表中的所有选项的一个数组。
Select 对象属性
disabled ：设定或返回可否应禁用下拉列表。
length ：返回下拉列表中的选项数目。
selectedIndex ：设定或返回下拉列表中被选项目的索引号。
Select 对象办法
add() ：向下拉列表增加一个选项。
remove() ：从下拉列表中删除一个选项。
Option 对象
Option 对象结构办法
Option(text,value) ：通过text和value值创立Option对象
Option 对象属性
selected ：设定或返回 selected 属性的值。
text ：设定或返回某个选项的纯文本值。
value ：设定或返回被送往效劳器的值。
Select对象及Option对象示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
<option value="4">四年级</option>
</select>
<input type="button" onclick="text()" value="按钮" />
<script type="text/javascript">
function text(){
var select = document.getElementById("grade");
console.log(select.disabled);
console.log(select.length);
console.log(select.selectedIndex);
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`")
var options = select.options;
console.log(options[select.selectedIndex].value);
console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")
for(var i=0;i<options.length;i++){
console.log(options[i].value);
console.log(options[i].selected);
console.log(options[i].text);
}
var option = new Option("五年级","5");
select.add(option);
select.remove(0);
}
</script>
</body>
</html>注册表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="color:red;" id="wrong-massage"></span><br />
<form onsubmit="return check()">
<table>
<tr>
<td>会员名：</td>
<td><input id="name" placeholder="请输入会员名" onblur="check_name()" ></td>
</tr>
<tr>
<td>密码：</td>
<td><input id="pw" type="password" placeholder="请输入密码" onblur="check_pw()"></td>
</tr>
<tr>
<td>确定密码：</td>
<td><input id="pw-check" type="password" placeholder="请输入确定密码"/></td>
</tr>
</table>
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<br />
<input type="checkbox" name="hobby" value="0"/>羽毛球
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>乒乓球
<input type="checkbox" name="hobby" value="3"/>足球
<br />
<select id="grade">
<option value="1">大一</option>
<option value="2">大二</option>
<option value="3">大三</option>
<option value="4">大四</option>
</select>
<br />
<td><input type="reset" value="重置" /></td>
<td><input type="submit" value="注册"/></td>
</form>
<script>
//使用$()函数可节约代码量
function $(id){
return document.getElementById(id);
}
function check(){
var n = document.getElementById("name");
var w = document.getElementById("pw");
var msg = document.getElementById("wrong-massage");
var c = document.getElementById("pw-check");
if(n.value.length>12){
msg.innerHTML = "会员名不克不及超越15个字符，请从新输入！";
n.focus();
return false;
}
if(n.value.length==0){
msg.innerHTML = "会员名不克不及为空，请从新输入！";
n.focus();
return false;
}
if(w.value.length>12){
msg.innerHTML = "密码不克不及超越12个字符，请从新输入！";
w.focus();
return false;
}
if(w.value.length==0){
msg.innerHTML = "密码不克不及为空，请从新输入！";
w.focus();
return false;
}
if(w.value!=c.value){
msg.innerHTML = "密码错误，请从新输入！";
c.focus();
return false;
}
var sex = document.getElementsByName("sex");
var hobby = document.getElementsByName("hobby");
for(var i=0;i<sex.length;i++){
sex[i].disabled=true;
console.log(sex[i].checked+" "+sex[i].value);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
for(var i=0;i<hobby.length;i++){
hobby[i].checked = true;
console.log(hobby[i].checked+" "+hobby[i].value);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
var select = document.getElementById("grade");
var options = select.options;
console.log(select.length);
console.log(select.selectedIndex);
console.log(options[select.selectedIndex].value);
for(var i=0;i<options.length;i++){
var option = options[i];
console.log(option.value)
select.disabled = true;
}
return false;
}
function check_name(){
var n = document.getElementById("name");
var msg = document.getElementById("wrong-massage");
if(n.value.length>12){
msg.innerHTML = "会员名不克不及超越15个字符，请从新输入！";
n.value = "";
n.focus();
}
else if(n.value.length==0){
msg.innerHTML = "会员名不克不及为空，请从新输入！";
n.focus();
}
else{
msg.innerHTML = " ";
}
}
function check_pw(){
var w = document.getElementById("pw");
var msg = document.getElementById("wrong-massage");
if(w.value.length>12){
msg.innerHTML = "密码不克不及超越12个字符，请从新输入！";
w.value = "";
w.focus();
}
else if(w.value.length==0){
msg.innerHTML = "密码不匹配，请从新输入！";
w.focus();
}
else
{
msg.innerHTML = " ";
}
}
</script>
</body>
</html>Image 对象
Image 对象属性
src：设定或返回图像的 URL。
相关引荐：
以上就是HTML对象：html一些对象属性的介绍的具体内容，更多请关注百分百源码网其它相关文章！
