Проектирование форм с использованием начальной загрузки

Question

Как сделать формы с использованием HTML? это форма, которая принимает ввод символов один за другим в HTML

Answer 1

У меня есть три подхода, здесь вы можете использовать оба или в соответствии с вашими требованиями. Из-за вашей структуры формы, я думаю, вы хотите сделать это с помощью таблицы.

1. Используйте вход в.

 Using <input> element in all <td>s,

 <tr><td><input type="text"></td>....</tr>

Также Вы можете изменить размер входного файла до размера его тд. напр.,

 input { width:100%; height:100%; }

2. Используйте атрибут contenteditable='true'. (HTML5)

Но если вы хотите использовать contenteditable='true', вы также можете сохранить соответствующие значения в базе данных. Вы можете достичь этого с помощью AJAX.

Вы можете прикрепить keyhandlers keyup, keydown, нажатие клавиш и т. Д. К. Также полезно использовать некоторую задержку () для тех событий, когда пользователь непрерывно печатает, событие ajax не будет срабатывать при каждом нажатии клавиши пользователем. например,

$('table td').keyup(function() 
{
 clearTimeout($.data(this, 'timer'));
 var wait = setTimeout(saveData, 500); // delay after user types
 $(this).data('timer', wait);
});

function saveData() 
{
  // ... ajax ...
}

3. Добавить, когда он нажал.

При вводе нажмите на элемент ввода в td, замените его значение в соответствии со значением td. Когда вход размыт, измените значение td на значение входа. Все это с помощью JavaScript.

Answer 2

Пожалуйста, ознакомьтесь с базовой формой начальной загрузки

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form role="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

Основной макет формы