溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用css做form表單的方法

發(fā)布時(shí)間：2020-09-14 11:42:56 來(lái)源：億速云 閱讀：197 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下怎么用css做form表單的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

                                                           網(wǎng)頁(yè)中的表單是用于搜集用戶的輸入，簡(jiǎn)而言之，就是表單是網(wǎng)頁(yè)與用戶交互的一個(gè)不可或缺的元素，也就是說(shuō)表單是用于向服務(wù)器傳輸數(shù)據(jù)的，總而言之，表單在網(wǎng)頁(yè)中是非常重要的。

首先我們需要知道form表單是由不同類型的標(biāo)簽組成，下面我們來(lái)看一下有哪些標(biāo)簽。

Form：定義表單的范圍。

Input：定義表單中的各個(gè)具體表單元素。

name：名稱，設(shè)定此一欄的名稱，程式中常會(huì)用到。

size：數(shù)值，設(shè)定此一欄位顯現(xiàn)的寬度。

value：預(yù)設(shè)內(nèi)容，設(shè)定此一欄位的預(yù)設(shè)內(nèi)容。

align：對(duì)齊方式，設(shè)定此一欄位的對(duì)齊方式。

maxkength：數(shù)值，設(shè)定此一欄位可設(shè)定輸入的最大長(zhǎng)度。

表單中的元素很多，包括常用的輸入框、文本框、單選項(xiàng)、復(fù)選框、下拉菜單、和按鈕等，這里就不一一介紹了，我們就來(lái)直接看一個(gè)css form表單制作的例子。

用css做form表單的代碼示例：

<!DOCTYPE html>
<head>
<title>表單</title>
<style>
<!--
form{                               /*設(shè)置整個(gè)表單樣式*/
    border: 2px dotted #AAAAAA;
    padding: 1px 6px 1px 6px;
    margin:0px;
    font:14px Arial;
}
input{                            /* 所有input標(biāo)記 */
    color: #00008B;    
}
input.txt{                        /* 文本框單獨(dú)設(shè)置 */
    border: 1px inset #00008B;
    background-color: #ADD8E6;
}
input.btn{                        /* 按鈕單獨(dú)設(shè)置 */
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px outset #00008B;
    padding: 1px 2px 1px 2px;
}
select{                            /*設(shè)置下拉列表框*/
    width: 80px;
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px solid #00008B;
}
textarea{                              /*設(shè)置多行文本框*/
    width: 200px;
    height: 40px;
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px inset #00008B;
}
-->
</style>
   </head>
<body>
<form action="" method="post">
<p>姓名:<br><input type="text" name="name" id="name" class="txt"></p>
<p>城市:<br>
<select name="city" id="city">
    <option value="">合肥</option>
    <option value="">南京</option>
    <option value="">杭州</option>
    <option value="">上海</option>
    <option value="">北京</option>
    <option value="">西安</option>
</select>
</p>
<p>性別:<br>
    <input type="radio" name="sex" id="male" value="male" class="rad">男<br>
    <input type="radio" name="sex" id="female" value="female" class="rad">女
</p>
<p>愛(ài)好:<br>
    <input type="checkbox" name="hobby" id="book" value="book" class="check">看書
    <input type="checkbox" name="hobby" id="net" value="net" class="check">上網(wǎng)
    <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡覺(jué)
</p>
<p>描述:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn"></p>
</form>
</body>
</html>

css form表單制作效果如下：

怎么用css做form表單的方法

上述css form表單制作代碼需要說(shuō)明的是：

action屬性 定義表單數(shù)據(jù)提交地址。

method屬性 定義表單提交的方式，一般有“get”方式和“post”方式。

如果想要設(shè)置哪個(gè)值為默認(rèn)值，可以用checked來(lái)設(shè)置。

以上是怎么用css做form表單的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手