在html中创建表单

b1uwtaje 于 2022-12-16 发布在其他

关注(0)|答案(7)|浏览(125)

我试图创建一个表单在html css.这是我试图复制的表单[1]：http://i.stack.imgur.com/mITNz.png
但我似乎不能得到它看起来像在上面的图片所需的格式。这是我的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;
    }

<!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>

如果有人能帮我做好这件事那就太好了

Html

来源：https://stackoverflow.com/questions/27101063/creating-a-form-in-html

7条答案

按热度按时间

kmpatx3s1#

您已经“几乎”成功了。只需在您的radio inputs中添加一个float: left;即可：
LIVE DEMO

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

有两个“额外”要点需要注意：

所有ID均应唯一
你的提交按钮可能更“普遍接受”嵌套在表单中，而不是表单之后。

修改这些修改后，应该会有类似于this的内容

赞(0）回复(0）举报 2022-12-16

31moq8wy2#

为什么不试试http://getbootsrtap.com，我想这个例子会对您有所帮助
http://getbootstrap.com/css/#forms-horizontal

赞(0）回复(0）举报 2022-12-16

kt06eoxx3#

我在fieldset中更改了label的width，并添加了float:left、label和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/>

赞(0）回复(0）举报 2022-12-16

gr8qqesn4#

您需要具有块元素
超文本标记语言

<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/

赞(0）回复(0）举报 2022-12-16

zpqajqem5#

试试这个CSS。
根据参考图像，其具有适当的对准

*{
    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**

赞(0）回复(0）举报 2022-12-16

qyswt5oh6#

试试这个，我已经添加了一些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>

赞(0）回复(0）举报 2022-12-16

wtzytmuj7#

*{
        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;
    }

<!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>

赞(0）回复(0）举报 2022-12-16

我来回答

在html中创建表单

7条答案

相关问题

热门标签

最新问答