Как выровнять формы ввода в HTML

Question

Я новичок в HTML и пытаюсь научиться использовать формы.

Самая большая проблема, с которой я столкнулся, - это выравнивание форм.Вот пример моего текущего HTML-файла:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

Проблема с этим заключается в том, что поле поля после 'Email' существенно отличается с точки зрения расстояния по сравнению с именем и фамилией.Каков «правильный» способ сделать так, чтобы они по существу «выстраивались в очередь»?

Я пытаюсь практиковать хорошую форму и синтаксис ... многие люди могут сделать это с помощью CSS. Я не являюськонечно, я только изучил самые основы HTML.

Answer 1

Просто добавьте

<form align="center ></from>

Просто вставьте выравнивание в открывающий тег.

Answer 2

Вставьте теги ввода в неупорядоченные списки. Сделайте тип стиля none. Вот пример.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

работал на меня!

Answer 3

Я думаю, было бы проще, если бы вы использовали таблицу для структурирования своей формы.Может быть, это утомительно, но ничего «скопировать и вставить» с небольшим редактированием не может исправить.

<form>
<table>
<tr>
<td> <label>First Name:</label> </td> <td> <input type="text" name="first"> </td> </tr>
<tr> <td> <label>Last Name:</label> </td> <td> <input type="text" name="last"> </td></tr>
<tr> <td> <label> Email: </label> </td> <td> <input type="text" name="email"> </td></tr>
</table>
</form>

Вы можете добавить некоторые отступы или плавать содержимое ячейки, чтобы она выглядела более просторной.

Answer 4

css Я использовал для решения этой проблемы, похож на Gjaa, но в стиле

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Вот мой HTML, используемый специально для простой формы регистрации без php-кода

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

Это очень просто, и я только начинаю, но сработало довольно хорошо

Answer 5

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

В CSS вы должны объявить как label, так и input как display: inline-block и указать ширину в соответствии с вашими требованиями Надеюсь, что это поможет вам. :)

Answer 6

Традиционным методом является использование таблицы.

Пример:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

Однако многие утверждают, что таблицы ограничивают и предпочитают CSS.Преимущество использования CSS заключается в том, что вы можете использовать различные элементы.Из списка div, упорядоченного и не упорядоченного списка вы можете выполнить тот же макет.

В конце вы захотите использовать то, что вам удобнее всего.

Подсказка: таблицылегко начать.