Heim > Artikel > Web-Frontend > Einführung in das HTML-Formularformular und sein einfaches Anwendungsbeispiel (vollständiger Code)
Einführung in das HTML-Formularformular und sein einfaches Anwendungsbeispiel (vollständiger Code)
- 不言Original
- 2018-08-21 14:02:084215Durchsuche
Der Inhalt dieses Artikels ist eine Einführung in das HTML-Formular und sein einfaches Anwendungsbeispiel (vollständiger Code). Ich hoffe, dass es für Sie hilfreich ist.
Formularobjekt eines HTML-Objekts: Das Formularobjekt repräsentiert ein HTML-Formular.
Das Folgende ist ein Formular (nehmen Sie „Baidu Click“ als Beispiel)
<form>
<input name="wd" />
<input type="button" value="百度一下" onclick="submitForm()"/>
</form>Wenn das Aktionsattribut zu diesem Formular als „https://www.baidu.com/s“ hinzugefügt wird ", die Schaltfläche Eingabe Ändern Sie den zu sendenden Typ, um eine Baidu-Suche durchzuführen. Das
ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag wird zum Erstellen von HTML-Formularen für Benutzereingaben verwendet.
Formulare können Eingabeelemente wie Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw. enthalten. Formulare können auch Menü-, Textbereichs-, Feldsatz-, Legenden- und Beschriftungselemente enthalten. Formulare dienen der Übermittlung von Daten an den Server. Und das ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag unterstützt alle Browser.
Als nächstes habe ich eine Registrierungsschnittstelle für eine einfache Anwendung über das Formular erstellt. Sie realisiert nur die Schnittstelleninteraktion und nicht die Registrierungsfunktion. Sie dient hauptsächlich dazu, die Verwendung allgemeiner Attribute im Formular darzustellen .
<!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>Die Einschränkungen sind: Der Benutzername darf nicht länger als 12 Zeichen sein; das Bestätigungspasswort muss mit dem Passwort übereinstimmen; das Problem tritt auf.
Verwandte Empfehlungen:
HTML-FORMULAR form_html/css_WEB-ITnose
HTML-Formular (Formular)-Studiennotizen
Das obige ist der detaillierte Inhalt vonEinführung in das HTML-Formularformular und sein einfaches Anwendungsbeispiel (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!