在html中创建表单_Html_Css_Forms

在html中创建表单

html css forms

在html中创建表单,html,css,forms,Html,Css,Forms,我正在尝试用html css创建一个表单。这就是我试图复制的表单[1]：但我似乎无法让它看起来像上图所示的格式。这是我的html *{ 保证金：0；填充：0； } 标签{ 显示：块；浮动：左；宽度：6em； } 输入，文本区域{ 宽度：14em；显示：块； } 输入[type=“radio”]{ 宽度：1米；边缘：1米2米； } 给定名称姓氏电子邮件地址服务基本的专业的保险费你为什么不试试，我想这个例子会对你有所帮助我已经更改了字段集中标签的宽度，并添加了

我正在尝试用html css创建一个表单。这就是我试图复制的表单[1]：

但我似乎无法让它看起来像上图所示的格式。这是我的html

*{
保证金：0；
填充：0；
}
标签{
显示：块；
浮动：左；
宽度：6em；
} 
输入，文本区域{
宽度：14em；
显示：块；
}
输入[type=“radio”]{
宽度：1米；
边缘：1米2米；
}


给定名称

姓氏

电子邮件

地址

服务
基本的
专业的
保险费

你为什么不试试，我想这个例子会对你有所帮助

我已经更改了

字段集中标签
的宽度
，并添加了float:left
标签
和输入元素。
*{
保证金：0；
填充：0；
}
标签{
显示：块；
浮动：左；
宽度：6em；
}
输入，
文本区{
宽度：14em；
显示：块；
}
输入[type=“radio”]{
宽度：1米；
边缘：1米2米；
}
形式{
边框：纯灰；
}
字段集标签，
字段集输入{
浮动：左；
}
字段集标签{
宽度：自动；
}

姓名


姓


电子邮件


地址


服务
基本的
专业的
保险费

你就快到了。只需添加一个float:left到您的无线电输入
：

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

所有ID都应该是唯一的
您的提交按钮可能更为“普遍接受”，因为它嵌套在表单中，而不是在表单之后

随着这些修改的更改，您应该有类似于的内容，您需要有块元素
html
检查这把小提琴
试试这个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;
}

检查这个
试试看，我添加了一些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>


给定名称

姓氏

电子邮件

地址

服务
基本的
专业的
保险费


@jbutler483有什么害处？它停止对齐输入控件。实际上，他将所有3个服务的服务ID保留为service1
，这仍然无法回答问题。是的，让它“更传统”，但不会解决OP的原始问题。我仍然认为对齐这些单选按钮的输入控件没有任何问题，他应该在标签
之前写入输入，如果他想将它们向左对齐，这与您的情况相同，但这可能对OP有用，事实上，这并没有回答他们的问题。也许这应该是一个评论？
*{
    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;
}

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