Home >Web Front-end >HTML Tutorial >Introduction to html form Form and its simple application example (complete code)
Introduction to html form Form and its simple application example (complete code)
- 不言Original
- 2018-08-21 14:02:084297browse
The content of this article is an introduction to HTML Form and its simple application example (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .
Form object of HTML object: Form object represents an HTML form.
The following is a form (take "Baidu Click" as an example)
<form>
<input name="wd" />
<input type="button" value="百度一下" onclick="submitForm()"/>
</form>If the action attribute is added to this form as "https://www.baidu.com/s", the button input Change the type to submit to perform Baidu search. The
ff9c23ada1bcecdd1a0fb5d5a0f18437 tag is used to create HTML forms for user input.
Forms can contain input elements, such as text fields, check boxes, radio buttons, submit buttons, etc. Forms can also contain menu, textarea, fieldset, legend, and label elements. Forms are used to transfer data to the server. And the ff9c23ada1bcecdd1a0fb5d5a0f18437 tag supports all browsers.
I made a registration interface for a simple application about the form that I roughly wrote. It only realized the interface interaction and did not realize its registration function. It was mainly to reflect how to use the commonly used attributes in the form.
<!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>The restrictions are: the username and password cannot be empty; the username cannot exceed 12 characters; the password cannot exceed 15 characters; the confirmation password must be consistent with the password; and the focus should be on where the problem occurs.
Related recommendations:
HTML FORM form_html/css_WEB-ITnose
The above is the detailed content of Introduction to html form Form and its simple application example (complete code). For more information, please follow other related articles on the PHP Chinese website!