html表单Form的介绍及其简略的利用实例（完备代码）
发布时间：09/01 来源：未知 浏览：
关键词：
HTML 对象之 Form 对象：Form 对象代表一个 HTML 表单。
以下就是一个form表单（以“baidu一下”为例）
<form>
<input name="wd" />
<input type="button" value="baidu一下" onclick="submitForm()"/>
</form>该表单假如增加action属性为“https://www.baidu.com/s”，按钮input的type改为submit，即可停止baidu搜索。
<form> 标签用于为会员输入创立 HTML 表单。
表单能够包括 input 元素，比方文本字段、复选框、单选框、提交按钮等等。表单还可以包括 menus、textarea、fieldset、legend 和 label 元素。表单用于向效劳器传输数据。且<form>标签支撑所有的阅读器。
下为本人粗糙编写的关于form表单的简便利用，制作了一个注册界面，仅实现了界面互动，未实现其注册功效，主如果为了表现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>其限制前提是：会员名和密码不克不及为空；会员名不得超越12个字符；密码不得超越15个字符；确定密码与密码需一致；且显现问题的地方定位焦点。
相关引荐：
HTML FORM 表单_html/css_WEB-ITnose
HTML表单（form）学习笔记
以上就是html表单Form的介绍及其简便的利用实例（完全代码）的具体内容，更多请关注百分百源码网其它相关文章！
