집 > 기사 > 웹 프론트엔드 > HTML 양식 소개 양식 및 간단한 적용 예(완전한 코드)

HTML 양식 소개 양식 및 간단한 적용 예(완전한 코드)

不言원래의: 2018-08-21 14:02:084213검색

이 글은 HTML 양식에 대한 소개와 간단한 응용 예제(완전한 코드)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

HTML 객체의 Form 객체: Form 객체는 HTML 양식을 나타냅니다.

다음은 양식입니다("바이두 클릭"을 예로 들어보겠습니다)

<form>
            <input name="wd" />
            <input type="button" value="百度一下" onclick="submitForm()"/>
</form>

이 양식에 "https://www.baidu.com/s"로 작업 속성을 추가하고 버튼 유형을 변경하면 제출하려면 Baidu 검색을 할 수 있습니다.

ff9c23ada1bcecdd1a0fb5d5a0f18437 태그는 사용자 입력을 위한 HTML 양식을 만드는 데 사용됩니다.

양식에는 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 입력 요소가 포함될 수 있습니다. 양식에는 메뉴, 텍스트 영역, 필드 세트, 범례 및 레이블 요소도 포함될 수 있습니다. 양식은 데이터를 서버로 전송하는 데 사용됩니다. 그리고 ff9c23ada1bcecdd1a0fb5d5a0f18437 태그는 모든 브라우저를 지원합니다.

다음으로 제가 대충 작성한 폼에 대해 간단한 애플리케이션용 등록 인터페이스를 만들었습니다. 인터페이스 상호작용만 구현하고 등록 기능은 구현하지 않은 상태에서 주로 폼에 사용되는 속성을 어떻게 사용하는지 반영하기 위한 것이었습니다. .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="msg" style="color: red;"></span>
		<form onsubmit="return check()">
			用户名：<input id="user_name" placeholder="请输入用户名" /><br />
			密码：<input id="password" type="password" placeholder="请输入密码" /><br />
			确认密码：<input id="re_password" type="password" placeholder="再次输入以确认密码" /><br />
			性别：<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" />乒乓球<br />
			年级：<select id="grade">
				<option value="0">一年级</option>
				<option value="1">二年级</option>
				<option value="2">三年级</option>
				<option value="3">四年级</option>
				<option value="4">五年级</option>
			</select>
			<input type="submit" value="注册"/><input type="reset" value="撤销"/>
		</form>
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			
			function check(){
				var radios=document.getElementsByName("sex");
				for(var i=0;i<radios.length;i++){
					var radio=radios[i];
					//radio.disable()=true;
					console.log(radio.checked+","+radio.value);
				}
				var checkboxes=document.getElementsByName("hobby");
				for(var i=0;i<checkboxes.length;i++){
					var checkbox =checkboxes[i];
					checkbox.checked=true;
					console.log(checkbox.checked+","+checkbox.value);
				}
				
				var select=document.getElementById("grade");
				//select.disabled=true;
				console.log(select.length);
				console.log(select.selectedIndex);
				
				var options=select.options;
				console,log(options[select.selectedIndex]);
				for (var i=0;i<options.length;i++) {
					var option =options[i];
					console.log(option.value);
				}
				
				var userName =$("user_name").value;
				var password =$("password").value;
				var rePassword =$("re_password").value;
				if (userName.length==0) {
					$("msg").innerHTML="用户名不能为空！"
					$("user_name").focus();
					return false;
				}
				if (userName.length>12) {
					$("msg").innerHTML="用户名不能超过12个字符！"
					$("user_name").focus();
					return false;
				}
				if (password.length==0) {
					$("msg").innerHTML="密码不能为空！"
					$("password").focus();
					return false;
				}
				if (password.length>15) {
					$("msg").innerHTML="密码不能超过15个字符！"
					$("password").focus();
					return false;
				}
				if (password!=rePassword) {
					$("msg").innerHTML="两次密码不一致！"
					$("re_password").focus();
					return false;
				}
				return true;
			}
		</script>
	</body>
</html>

제한 사항은 다음과 같습니다. 사용자 이름과 비밀번호는 12자를 초과할 수 없습니다. 비밀번호는 15자를 초과할 수 없으며, 문제가 발생한 위치에 초점을 맞춰야 합니다.

HTML 양식 소개 양식 및 간단한 적용 예(완전한 코드)

관련 기사