使用bootstrap进行表单设计

Question

如何使用HTML制作表单？ this is a form that takes character input one by one in html

Answer 1

请查看Basic Bootstrap Form

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

基本表单布局

Answer 2

我有三种方法，在这里你可以使用两种方法或根据你的要求。因为我认为你的形式结构，你想使用表格。

<强> 1。使用输入。

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

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

此外，您可能希望将输入大小调整为其大小的td。离。，

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

<强> 2。使用contenteditable =＆＃39; true＆＃39;属性。 （HTML5）

但是如果你想使用contenteditable =＆＃39; true＆＃39;您可能还希望将适当的值保存到数据库中。你可以用ajax实现这一点。

你可以将keycutler keyup，keydown，keypress等附加到。当用户连续输入时，对事件使用一些延迟（）是很好的，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。