HTMLフォームの紹介フォームとその簡単な応用例（完全なコード）-htmlチュートリアル-php.cn

HTMLフォームの紹介フォームとその簡単な応用例（完全なコード）

不言

リリース： 2018-08-21 14:02:08

オリジナル

4245 人が閲覧しました

この記事では、HTML フォームの概要とその簡単な応用例 (完全なコード) を紹介します。必要な方は参考にしていただければ幸いです。

HTML オブジェクトの Form オブジェクト: Form オブジェクトは HTML フォームを表します。

以下はフォームです（「Baidu Click」を例にします）

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

ログイン後にコピー

このフォームに「https://www.baidu.com/s」としてアクション属性を追加し、ボタンの種類を変更すると入力して送信すると、Baidu 検索を実行できます。

タグは、ユーザー入力用の HTML フォームを作成するために使用されます。

フォームには、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなどの入力要素を含めることができます。フォームには、メニュー、テキストエリア、フィールドセット、凡例、およびラベル要素を含めることもできます。フォームは、データをサーバーに転送するために使用されます。タグはすべてのブラウザをサポートします。

次に、大まかに書いたフォームに関する簡単なアプリケーションの登録インターフェースを作成しました。これは、インターフェースの対話を実現するだけであり、その登録機能は主にフォームにどのように使用するかを反映するものでした。。

<!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 文字を超えてはならず、確認パスワードはパスワードと一致している必要があり、問題が発生した場所に重点を置く必要があります。