如何将文本放在输入表单的前面？答案

【问题标题】：How to put text in front of the input form?如何将文本放在输入表单的前面？
【发布时间】：2019-11-09 16:19:27
【问题描述】：

每当我在 html 中使用输入表单时，我都会这样做：

<form>
  First name:<input type="text" name="firstname">
  </form>.

所以，它会变成这样：名字，然后在“名字”文本下方输入字段。我该如何做到这一点，就像在这种情况下一样： https://i.stack.imgur.com/jDGzD.png

基本上是“First name”然后输入RIGHT NEXT就可以了？我正在使用 HTML 5 和 CSS3。

【问题讨论】：

标签： html css forms input

【解决方案1】：

你可以使用这样的表格 :)

<form>
   <table>
      <tr>
          <td>First name</td>
          <td><input type="text" name="firstname"></td>
      </tr>
      <tr>
          <td>last name</td>
          <td><input type="text" name="lastname"></td>
      </tr>
      <tr>
          <td style="vertical-align: top;" >Message </td>
          <td><textarea></textarea></td>
      </tr>
   </table>
 </form>.

【讨论】：

【解决方案2】：

试试放label标签，

<form>
  <label>First name: </label> <input type="text" name="firstname">
</form>

对于多个表单字段，为每个字段添加父 div，如下代码所示

<form>
  <div>
    <label>First name:</label>
    <input type="text" name="firstname">
  </div>
  <div>
    <label>Second name:</label>
    <input type="text" name="secondname">
  </div>  
</form>

【讨论】：

【解决方案3】：

通常我使用 table 来完成它，而无需在 css 中使用任何复杂的样式。所以它看起来像这样：

<form>
<table>
   <tr>
      <td>First Name</td>
      <td>:</td>
      <td<input type="text" name="firstname"></td>
   </tr>
</table>
</form>

但你也可以使用标签标签：

<label for="firstname">First Name :/label>
<input type="text" name="firstname" id="firstname">

或在css中使用浮动功能进行样式

【讨论】：