溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關怎么用css做form表單的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
首先我們需要知道form表單是由不同類型的標簽組成，下面我們來看一下有哪些標簽。
Form：定義表單的范圍。
Input：定義表單中的各個具體表單元素。
name：名稱，設定此一欄的名稱，程式中常會用到。
size：數值，設定此一欄位顯現的寬度。
value：預設內容，設定此一欄位的預設內容。
align：對齊方式，設定此一欄位的對齊方式。
maxkength：數值，設定此一欄位可設定輸入的最大長度。
表單中的元素很多，包括常用的輸入框、文本框、單選項、復選框、下拉菜單、和按鈕等，這里就不一一介紹了，我們就來直接看一個cssform表單制作的例子。
用css做form表單的代碼示例：
<!DOCTYPEhtml>
<head>
<title>表單</title>
<style>
<!--
form{/*設置整個表單樣式*/
border:2pxdotted#AAAAAA;
padding:1px6px1px6px;
margin:0px;
font:14pxArial;
}
input{/*所有input標記*/
color:#00008B;
}
input.txt{/*文本框單獨設置*/
border:1pxinset#00008B;
background-color:#ADD8E6;
}
input.btn{/*按鈕單獨設置*/
color:#00008B;
background-color:#ADD8E6;
border:1pxoutset#00008B;
padding:1px2px1px2px;
}
select{/*設置下拉列表框*/
width:80px;
color:#00008B;
background-color:#ADD8E6;
border:1pxsolid#00008B;
}
textarea{/*設置多行文本框*/
width:200px;
height:40px;
color:#00008B;
background-color:#ADD8E6;
border:1pxinset#00008B;
}
-->
</style>
</head>
<body>
<formaction=""method="post">
<p>姓名:<br><inputtype="text"name="name"id="name"class="txt"></p>
<p>城市:<br>
<selectname="city"id="city">
<optionvalue="">合肥</option>
<optionvalue="">南京</option>
<optionvalue="">杭州</option>
<optionvalue="">上海</option>
<optionvalue="">北京</option>
<optionvalue="">西安</option>
</select>
</p>
<p>性別:<br>
<inputtype="radio"name="sex"id="male"value="male"class="rad">男<br>
<inputtype="radio"name="sex"id="female"value="female"class="rad">女
</p>
<p>愛好:<br>
<inputtype="checkbox"name="hobby"id="book"value="book"class="check">看書
<inputtype="checkbox"name="hobby"id="net"value="net"class="check">上網
<inputtype="checkbox"name="hobby"id="sleep"value="sleep"class="check">睡覺
</p>
<p>描述:<br><textareaname="comments"id="comments"cols="30"rows="4"class="txtarea"></textarea></p>
<p><inputtype="submit"name="btnSubmit"id="btnSubmit"value="提交"class="btn"></p>
</form>
</body>
</html>感謝各位的閱讀！關于“怎么用css做form表單”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
