Tạo form bằng HTML và jQuery

Form HTML cơ bản sử dụng thẻ <form> với các input. jQuery cho phép tạo form động (dynamic) bằng JavaScript.

1. Form HTML tĩnh

<form action="" method="get">
  Thông tin:<br><br>
  Tên sinh viên<br>
  <input type="text" name="sname"><br>
  Ngày giờ thi<br>
  <input type="datetime-local" name="datetime"><br>
  <input type="submit" value="Gửi">
</form>

2. Tạo form động với jQuery

Cách đơn giản: Thêm input vào form đã có.

$form.append('<input type="button" value="Nút bấm">');

Cách hoàn chỉnh: Tạo form từ đầu và append vào body.

var $myform = $("<form></form>");
$myform.append('<input type="button" value="Nút bấm">');
$('body').append($myform);

Mở rộng: Tạo form hoàn chỉnh động

function createDynamicForm() {
  var $form = $('<form>', {
    action: '/submit',
    method: 'post',
    id: 'dynamicForm'
  });

  $form.append(
    $('<div>').append(
      $('<label>').text('Họ tên: '),
      $('<input>', { type: 'text', name: 'fullname', required: true })
    ),
    $('<div>').append(
      $('<label>').text('Email: '),
      $('<input>', { type: 'email', name: 'email', required: true })
    ),
    $('<button>', { type: 'submit', text: 'Gửi' })
  );

  $('body').append($form);
  return $form;
}

Lợi ích tạo form động

• Tạo form dựa trên dữ liệu từ server (JSON schema).
• Điều khiển hiển thị/ẩn field theo điều kiện.
• Tích hợp validation client-side tự động.