在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中创建表单

回答

相关问题