在html中創建表單

即時嘗試在html css中創建表單。這是我想要複製的形式[1]：http://i.stack.imgur.com/mITNz.png 在html中創建表單

但我似乎無法像上圖所示的那樣獲取它所需的格式。這是我的HTML

*{ 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    label { 
 
     display: block; 
 
     float: left; 
 
     width: 6em; 
 
    } 
 
    
 
    input, textarea { \t \t 
 
     width: 14em; 
 
     display: block; 
 
    } 
 
    
 
    input[type="radio"] { 
 
     width: 1em; 
 
     margin: .1em .2em; 
 
    }

<!DOCTYPE html > 
 
<html> 
 
    <head> 
 

 
    <link rel="stylesheet" type="text/css" href="pracExam2.css"> 
 

 

 
    </head> 
 

 
    <body> 
 

 
    <form action="#" method="get" > 
 
     <label>Given name</label><input type="text" name="givenName" /><br/> 
 
     <label>Family name</label><input type="text" name="familyName" /><br/> 
 
     <label>eMail</label><input type="email" name="eMail" /><br/> 
 
     <label>Address</label><textarea rows="4" name="address"></textarea><br/> 
 
     <label>Service</label> 
 
     <fieldset> 
 
     <label for="service1">Basic</label><input type="radio" name="service" id="service1" value="basic" /> 
 
     <label for="service2">Professional</label><input type="radio" name="service" id="service1" value="professional" /> 
 
     <label for="service3">Premium</label><input type="radio" name="service" id="service1" value="premium" /> 
 
     </fieldset> 
 
    </form> 
 
    <input type="submit" value = "submit form" /><br/> 
 
    </body> 
 

 
</html>

，如果有人可以幫助我得到這個權利，將是巨大

來源

2014-11-24 Phill

你爲什麼不嘗試http://getbootsrtap.com和我的事情這個例子會幫助你

http://getbootstrap.com/css/#forms-horizontal

來源

2014-11-24 09:03:40 Devansh

雖然這可能是有用的OP，它事實上沒有回答他們的問題。也許這應該是一個評論呢？ – jbutler483 2014-11-24 09:17:34

我改變了fieldset內部的label的width以及添加的float:leftlabel和input元素。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
label { 
 
    display: block; 
 
    float: left; 
 
    width: 6em; 
 
} 
 
input, 
 
textarea { 
 
    width: 14em; 
 
    display: block; 
 
} 
 
input[type="radio"] { 
 
    width: 1em; 
 
    margin: .1em .2em; 
 
} 
 
form { 
 
    border: solid grey; 
 
} 
 
fieldset label, 
 
fieldset input { 
 
    float: left; 
 
} 
 
fieldset label { 
 
    width: auto; 
 
}

<form action="#" method="get"> 
 
    <label>Given name</label> 
 
    <input type="text" name="givenName" /> 
 
    <br/> 
 
    <label>Family name</label> 
 
    <input type="text" name="familyName" /> 
 
    <br/> 
 
    <label>eMail</label> 
 
    <input type="email" name="eMail" /> 
 
    <br/> 
 
    <label>Address</label> 
 
    <textarea rows="4" name="address"></textarea> 
 
    <br/> 
 
    <label>Service</label> 
 
    <fieldset> 
 
    <label for="service1">Basic</label> 
 
    <input type="radio" name="service" id="service1" value="basic" /> 
 
    <label for="service2">Professional</label> 
 
    <input type="radio" name="service" id="service1" value="professional" /> 
 
    <label for="service3">Premium</label> 
 
    <input type="radio" name="service" id="service1" value="premium" /> 
 
    </fieldset> 
 
</form> 
 
<input type="submit" value="submit form" /> 
 
<br/>

來源

2014-11-24 09:09:41 ummahusla

你是幾乎那裏。只需添加一個float: left;您radio inputs：

LIVE DEMO

input[type="radio"] { 
    width: 1em; 
    margin: .1em .2em; 
    float:left; 
}

有兩個 '額外' 需要注意的幾點：

所有的ID應該是唯一的
你的提交按鈕可能會更'普遍接受'嵌套在表格中，而不是在表格之後。

有了這些修訂改變了，你應該有類似this

來源

2014-11-24 09:09:50 jbutler483

你需要有塊元素

HTML

<form action="#" method="get" > 
    <label>Given name</label><input type="text" name="givenName" /><br/> 
    <label>Family name</label><input type="text" name="familyName" /><br/> 
    <label>eMail</label><input type="email" name="eMail" /><br/> 
    <label>Address</label><textarea rows="4" name="address"></textarea><br/> 
    <label>Service</label> 
    <fieldset style="display:inline-block;"> 
     <div class="fieldset_blocks"><label for="service1">Basic<input type="radio" name="service" id="service1" value="basic" /></label></div> 
     <div class="fieldset_blocks"><label for="service2">Professional<input type="radio" name="service" id="service1" value="professional" /></label></div> 
     <div class="fieldset_blocks"><label for="service3">Premium<input type="radio" name="service" id="service1" value="premium" /></label></div> 
    </fieldset> 
    </form> 
    <input type="submit" value = "submit form" /><br/>

CSS

*{ 
    margin: 0; 
    padding: 0; 
} 

label { 
    display: block; 
    float: left; 
    padding:5px 10px; 
} 

input, textarea {  
    width: 14em; 
    display: block; 
} 

input[type="radio"] { 
    width: 1em; 
    margin: .1em .2em; 
} 

form { 
    border: solid grey; 
    display:inline-block; 
} 
.fieldset_blocks{ 
    display:inline-block; 
} 
.fieldset_blocks label,.fieldset_blocks input{ 
    display:inline-block; 
}

檢查這個東西小提琴

http://jsfiddle.net/8kj177et/1/

來源

2014-11-24 09:12:32 Tejesh

這樣做比弊大於利。 – jbutler483 2014-11-24 09:13:46

@ jbutler483傷害是什麼 – Tejesh 2014-11-24 09:15:01

它停止對齊輸入控件 – jbutler483 2014-11-24 09:16:14

試試這個CSS。

它具有正確的aligments按照基準圖像

*{ 
    margin: 0px; 
    padding: 0px; 
} 

label { 
    display: block; 
    float: left; 
    width: 6em; 
    text-align:right; 
    margin-right:10px; 
} 

input[type="text"], input[type="email"], textarea {  
    width: 80%; 
    display: block; 
} 

input[type="radio"] { 
    width: 1em; 
    margin: .2em .1em; 
    float:left; 
} 

form { 
    border: solid grey; 
    padding:10px; 
}

入住這DEMO

來源

2014-11-24 09:22:27 VSri58

嘗試了這一點我必須添加一些CSS和HTML代碼。

*{ 
    margin: 0; 
    padding: 0; 
} 

label { 
     display: block; 
     float: left; 
     width: 6em; 
    } 

input, textarea 
    {  
    width: 14em; 
    display: block; 
    } 

input[type="radio"] 
    { 
     width: 1em; 
     margin: .1em .2em; 
     float: left; 
    } 

form 
    { 
     border: solid grey; 
     width: 350px; 
     padding-top: 10px; 
     padding-left: 10px; 
    }

HTML代碼

<html> 
    <head> 

     <link rel="stylesheet" type="text/css" href="pracExam2.css"> 
    </head> 

    <body> 

     <form action="#" method="get" > 
      <label>Given name</label><input type="text" name="givenName" /><br/> 
      <label>Family name</label><input type="text" name="familyName" /><br/> 
      <label>eMail</label><input type="email" name="eMail" /><br/> 
      <label>Address</label><textarea rows="4" name="address"></textarea><br/> 
      <label>Service</label> 
     <fieldset style="width: 232px;"> 
      <label style="width:35px" for="service1">Basic</label><input type="radio" name="service" id="service1" value="basic" /> 
      <label style="width:80px" for="service2">Professional</label><input type="radio" name="service" id="service1" value="professional" /> 
      <label style="width:60px" for="service3">Premium</label><input type="radio" name="service" id="service1" value="premium" /> 
     </fieldset> 
     <div style="text-align: center;padding-top: 10px;"> 
      <input type="submit" style="display: inline-block;" value = "submit form" /></div> 
     <br/> 
     </form> 

    </body> 

</html>

來源

2014-11-24 10:10:43

在html中創建表單

回答

相關問題