Question

我正在编写一个html文档，其输出如下： enter image description here

我有两个问题：我想排队前三个输入字段。 2.单选按钮无法正常工作。

我的HTML代码是：

<!DOCTYPE html>
<html>
    <head> 
        <title>
            Contact Us
        </title>
        <link rel="stylesheet" href="styleit.css"/>

        </head>
    <body>
        <h1> Contact Us </h1>
        <form id="form">
            Your Name : <input type = "text" value = "name" > </br>
            Mobile no : <input type = "text" value = " Mob" ></br>
            Email   :   <input type = "text" value = "Email"></br>
            Best time to call: <input type="radio" >evening 
                                        <input type="radio">morning </br>
            Languages: <br>
                        <input type="checkbox" > C
                          <input type="checkbox" > C++ <br>
                          <input type="checkbox" > C#
                          <input type="checkbox" > python<br>
                          <input type="checkbox" > Java 
                          <input type="checkbox" > CSS </input> <br>

            <input type="submit" value="submit">

        </form>
    </body>
</html>

我的css代码是：

form input
{
    margin: 5px;
    display: inline-block;
    width: 150px;
    }
h1
{
text-align:center;
 }

我做错了什么？

Answer 1

修复你的单选按钮非常简单......你必须告诉浏览器＆＃34; group＆＃34;你的单选按钮是，这是通过name属性完成的：

<input type="radio" name="bestTimeToCall">evening</input>
<input type="radio" name="bestTimeToCall">morning</input>

对齐你的表单fiels有点棘手，实际上可以通过多种方式完成。一种方法是使用表格，将标签放在第一列，将字段放在第二列。这不是最佳的，因为你不应该使用表格，但对于初学者来说，这是迄今为止最简单的解决方案。

最好的解决方案，但有点复杂，就是为标签使用label标记，并设置此标记的样式，使其始终具有相同的宽度，这意味着输入字段将所有都从同一点开始，看起来是对齐的。

另请注意<br>可以这样写（在HTML 5中）或<br/>，但从不</br>

Answer 2

您应该在收音机和复选框输入中添加name属性。你可以阅读一些有用的表格标签here

关于对齐，有几种方法可以解决这个问题，具体取决于你认为这是最好的方法。例如，您可以使用表来排列这种字段，或者向您输入字段并通过css对齐它们。我建议使用bootstrap来处理这类事情，这是一个非常实用的解决方案。但同样，可能性几乎是无限的。

Answer 3

<label>Your Name :</label> <input type = "text" value = "name" >
<label<Mobile no :</label> <input type = "text" value = " Mob" >
<label>Email   :</label>   <input type = "text" value = "Email"
</label>Best time to call:</label> <input type="radio" name="time">evening 
<input type="radio" name="time">morning </br>

为无线电输入添加属性 - name。删除<br /> 使用<label>

添加display: inline-block

JSFIDDLE

所有输入字段应在同一行

3 个答案: