html表單Form的介紹及其簡單的應用實例（完整程式碼）
- 不言原創
- 2018-08-21 14:02:084280瀏覽
這篇文章帶給大家的內容是關於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，即可進行百度搜尋。
ff9c23ada1bcecdd1a0fb5d5a0f18437 標籤用於為使用者輸入建立 HTML 表單。
表單能夠包含 input 元素，例如文字欄位、核取方塊、單一選取方塊、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向伺服器傳輸資料。且ff9c23ada1bcecdd1a0fb5d5a0f18437標籤支援所有的瀏覽器。
下為自己粗糙編寫的關於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的介紹及其簡單的應用實例（完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn