本篇文章给大家带来的内容是关于html表单Form的介绍及其简单的应用实例（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
HTML 对象之 Form 对象：Form 对象代表一个 HTML 表单。
以下就是一个form表单（以“百度一下”为例）
<form> <input name="wd" /> <input type="button" value="百度一下" onclick="submitForm()"/></form>
该表单如果添加action属性为“https://www.baidu.com/s”，按钮input的type改为submit，即可进行百度搜索。
<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）学习笔记
