代码之家 › 专栏 › 技术社区 › steven

CSS表单样式

form-design forms xhtml css html

steven · 技术社区 · 16 年前

我试着做到:

<form id="simple-search" name="simple-search" action="/search/" method="POST">
    <label for="simple-search-address">Location/Address</label>
    <input type="text" id="simple-search-address" name="address" value="" />
    <label for="simple-search-dob-day'">D.O.B.</label>
    <select name="dob-day" id="simple-search-dob-day"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
    <select name="dob-month" id="simple-search-dob-month"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
    <select name="dob-year" id="simple-search-dob-year"><option value="0">2009</option><option value="1">2008</option><option value="2">2007</option><option value="3">2006</option><option value="4">2005</option><option value="5">2004</option><option value="6">2003</option><option value="7">2002</option><option value="8">2001</option><option value="9">2000</option><option value="10">1999</option><option value="11">1998</option><option value="12">1997</option><option value="13">1996</option><option value="14">1995</option><option value="15">1994</option><option value="16">1993</option><option value="17">1992</option><option value="18">1991</option><option value="19">1990</option><option value="20">1989</option><option value="21">1988</option><option value="22">1987</option><option value="23">1986</option><option value="24">1985</option><option value="25">1984</option><option value="26">1983</option><option value="27">1982</option><option value="28">1981</option><option value="29">1980</option><option value="30">1979</option><option value="31">1978</option><option value="32">1977</option><option value="33">1976</option><option value="34">1975</option><option value="35">1974</option><option value="36">1973</option><option value="37">1972</option><option value="38">1971</option><option value="39">1970</option><option value="40">1969</option><option value="41">1968</option><option value="42">1967</option><option value="43">1966</option><option value="44">1965</option><option value="45">1964</option><option value="46">1963</option><option value="47">1962</option><option value="48">1961</option><option value="49">1960</option><option value="50">1959</option><option value="51">1958</option><option value="52">1957</option><option value="53">1956</option><option value="54">1955</option><option value="55">1954</option><option value="56">1953</option><option value="57">1952</option><option value="58">1951</option><option value="59">1950</option><option value="60">1949</option><option value="61">1948</option><option value="62">1947</option><option value="63">1946</option><option value="64">1945</option><option value="65">1944</option><option value="66">1943</option><option value="67">1942</option><option value="68">1941</option><option value="69">1940</option><option value="70">1939</option><option value="71">1938</option><option value="72">1937</option><option value="73">1936</option><option value="74">1935</option><option value="75">1934</option><option value="76">1933</option><option value="77">1932</option><option value="78">1931</option><option value="79">1930</option><option value="80">1929</option><option value="81">1928</option><option value="82">1927</option><option value="83">1926</option><option value="84">1925</option><option value="85">1924</option><option value="86">1923</option><option value="87">1922</option><option value="88">1921</option><option value="89">1920</option><option value="90">1919</option><option value="91">1918</option><option value="92">1917</option><option value="93">1916</option><option value="94">1915</option><option value="95">1914</option><option value="96">1913</option><option value="97">1912</option><option value="98">1911</option><option value="99">1910</option><option value="100">1909</option><option value="101">1908</option><option value="102">1907</option><option value="103">1906</option><option value="104">1905</option><option value="105">1904</option><option value="106">1903</option><option value="107">1902</option><option value="108">1901</option><option value="109">1900</option></select>    <input type="hidden" name="search-type" value="simple" />
    <input type="submit" id="simple-search-submit" name="submit" value="Search" />
</form>

看起来像: http://img686.imageshack.us/img686/8994/95340998.gif (注意最左边的D.O.B.框应该在左边的行上)

4 回复 | 直到 16 年前

antpaw 16 年前

即使在现代浏览器中,表单a的呈现方式总是略有不同,这也取决于您使用的操作系统,我认为在下拉列表之前使用inline block是个好主意。

Ham Vocke 16 年前

插入 <br /> 在地址输入之后。您可以将选择和输入与属性对齐 text-align: right; margin: 5px; 在每个元素的顶部、左侧、底部和右侧应用5px空白。

就这样组合起来:

form {
    text-align: right;
    margin: 5px;
}

要给“位置/地址”标签指定所需的大小,可以创建一个css类并将其应用于标签。

matpol 16 年前

我总是将标签输入到p标签中,然后将标签设置为display:block,并用设置的宽度将其向左浮动,例如。

<p><label></label><input type="text" name="thing" id="thing" value="" /></p>

label{
float: left;
display: block;
width: 100px;
}
input,select{
width: 200px;
}

对于日期,我也会这样做,但是在p like-id=“dob”中添加一个id,然后为这些输入设置一个特例,比如:

#dob select{
width: 50px;
float: left;
}

这意味着您可以很容易地控制这个标签内选择的宽度。

erikkallen 16 年前