Html 所有输入字段应在同一行中_Html_Css_Forms

Html 所有输入字段应在同一行中

html css forms

Html 所有输入字段应在同一行中,html,css,forms,Html,Css,Forms,我正在编写一个html文档，其中的输出如下：我有两个问题： 1.我想排列前三个输入字段。 2.单选按钮工作不正常我的html代码是： <!DOCTYPE html> <html> <head> <title> Contact Us </title> <link rel="stylesheet" href="styleit.css"/>

我正在编写一个html文档，其中的输出如下：

我有两个问题： 1.我想排列前三个输入字段。 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>

我做错了什么？

修复单选按钮非常简单。。。您必须告诉浏览器您的单选按钮所在的组，这是通过“名称”属性完成的：

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

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

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

还请注意，可以用HTML5以这种方式编写，或者，但决不能

您应该在收音机和复选框输入中添加名称属性。您可以阅读一些有用的表单标记

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

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

添加属性-无线电输入的名称。去除添加显示：内联块

首先，您应该为无线电输入添加相同的名称-服务器端使用需要相同的名称。我需要它吗？你需要收音机的“名称”来加入你选择的值。然后我想我必须添加很多ID：晚上早上我们可以不使用表或标签吗？文本节点周围的任何周围标记=字段前面的文本也会这样做，但你需要一个，标记是为这个语义设计的。例如，使用此标记及其For属性链接到正确的输入将允许您在单击标签时聚焦字段。看，您可以按照自己的意愿进行操作，这不是我的代码。仍然是无效的HTML，现在或将来可能会被某些浏览器误解。如果你的目标是在不尊重标准的情况下做你想做的事情，那就这样吧，但当将来出现问题时，不要感到惊讶……在这种情况下，bootstrap不是有点过火吗？@Bartdude我认为初学者从一个简单的方法开始，用正确的方法做事情是很好的，Bootstrap是一种让非设计师制作漂亮界面和表单的方法，而不必担心其他事情。如果你正在学习，这是一个很好的方法来灌输自己一些好的做法：。但我明白你的意思，可能有点太多了。我明白你的意思，但我完全不同意你的观点。在我看来，使用像bootstrap这样的框架对初学者来说不是一件好事。他们不学习做HTML，CSS等等。。。他们学习使用框架，就是这样。所以从长远来看，我不认为在不知道最初做事方式的情况下走捷径是个好主意。如果你在孩子学会走路之前教他如何骑自行车，他可能会成为自行车之王，但当他没有自行车的时候，这可能是一个问题……我相信他们在使用bootstrap时确实学到了很多HTML和CSS，甚至更少或更少的sass。我对Zend或Django等其他框架也有同样的感觉，因为它们实际上处于另一个asbtraction级别。要使用bootstrab，还需要了解HTML和CSS以及良好实践。

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