이 문서의 내용은 HTML 개체에 대한 내용입니다. html의 일부 개체 속성에 대한 소개입니다. 특정 참조 값이 있으므로 도움이 필요한 경우 참조할 수 있습니다.
양식 개체
양식 개체 메서드
reset(): 양식의 모든 입력 요소를 기본값으로 재설정합니다.
submit(): 양식을 제출합니다.
텍스트 개체
텍스트 개체 속성
disabled: 텍스트 필드를 비활성화할지 여부를 설정하거나 반환합니다.
readOnly: 텍스트 필드가 읽기 전용인지 여부를 설정하거나 반환합니다.
value: 텍스트 필드의 value 속성 값을 설정하거나 반환합니다.
텍스트 개체 메서드
focus(): 텍스트 필드에 포커스를 설정합니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input name = "wd" />
<input type="submit" value="百度一下" 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 object
Radio object property
checked: 라디오 버튼의 상태를 설정하거나 반환합니다.
disabled: 라디오 버튼의 비활성화 여부를 설정하거나 반환합니다.
value: 라디오 버튼의 value 속성 값을 설정하거나 반환합니다.
Checkbox 개체
Checkbox 개체 속성
checked : 확인란을 선택해야 하는지 여부를 설정하거나 반환합니다.
disabled : 체크박스를 비활성화할지 여부를 설정하거나 반환합니다.
value : 체크박스의 value 속성 값을 설정하거나 반환합니다.
객체 선택
객체 컬렉션 선택
options[] : 드롭다운 목록의 모든 옵션을 포함하는 배열을 반환합니다.
객체 속성 선택
disabled: 드롭다운 목록을 비활성화할지 여부를 설정하거나 반환합니다.
length: 드롭다운 목록의 옵션 수를 반환합니다.
selectedIndex: 드롭다운 목록에서 선택한 항목의 색인 번호를 설정하거나 반환합니다.
객체 방법 선택
add(): 드롭다운 목록에 옵션을 추가합니다.
remove(): 드롭다운 목록에서 옵션을 제거합니다.
Option 개체
Option 개체 생성 방법
Option(text,value): 텍스트와 값 값을 통해 Option 개체 생성
Option 개체 속성
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>Registry
<!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의 일부 객체 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
