溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了如何使用html表單form中的常用屬性，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“如何使用html表單form中的常用屬性”這篇文章吧。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
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中的常用屬性”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
