Как разместить текст перед формой ввода?

Question

Всякий раз, когда я использую формы ввода в html, я делаю это, например, так:

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

Итак, это будет выглядеть так: Имя, а затем поле ввода под текстом «имя». Как мне сделать так, чтобы в этом случае было: https://i.stack.imgur.com/jDGzD.png

По сути, «Имя», а затем введите ПРАВО СЛЕДУЮЩЕГО к нему? Я использую HTML 5 и CSS3.

Answer 1

Обычно я использую таблицу, чтобы сделать это без каких-либо сложных стилей в 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 с помощью функции float

Answer 2

вы можете использовать такие таблицы :)

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

Answer 3

Попробуйте поставить метку тега,

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