Introduction au formulaire HTML Form et son exemple d'application simple (code complet)-tutoriel HTML-php.cn

Introduction au formulaire HTML Form et son exemple d'application simple (code complet)

不言

Libérer： 2018-08-21 14:02:08

original

4313 Les gens l'ont consulté

Le contenu de cet article est une introduction au formulaire HTML et à son exemple d'application simple (code complet). Il a une certaine valeur de référence. J'espère que cela vous sera utile.

Objet Form d'un objet HTML : L'objet Form représente un formulaire HTML.

Ce qui suit est un formulaire (prenez "Baidu Click" comme exemple)

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

Copier après la connexion

Si l'attribut d'action est ajouté à ce formulaire comme "https://www.baidu.com /s", Modifiez le type de saisie du bouton à soumettre pour effectuer une recherche Baidu. La balise

est utilisée pour créer des formulaires HTML pour la saisie de l'utilisateur.

Les formulaires peuvent contenir des éléments de saisie, tels que des champs de texte, des cases à cocher, des boutons radio, des boutons de soumission, etc. Les formulaires peuvent également contenir des éléments de menu, de zone de texte, de champs, de légende et d'étiquette. Les formulaires sont utilisés pour transférer des données vers le serveur. Et la balise prend en charge tous les navigateurs.

Ensuite, j'ai créé une interface d'enregistrement pour une application simple à partir du formulaire que j'ai grossièrement écrit. Elle ne réalisait que l'interaction de l'interface et n'a pas réalisé sa fonction d'enregistrement. Il s'agissait principalement de montrer comment utiliser les éléments couramment utilisés. attributs dans le formulaire.

<!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>

Copier après la connexion

Les restrictions sont : le nom d'utilisateur et le mot de passe ne peuvent pas être vides ; le nom d'utilisateur ne peut pas dépasser 12 caractères ; le mot de passe de confirmation doit être cohérent avec le mot de passe ; sur l'endroit où le problème se produit.

Recommandations associées :

FORMULAIRE HTML form_html/css_WEB-ITnose

Formulaire HTML (formulaire) notes d'étude

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!