Tạo form thu thập thông tin người dùng tuyệt đẹp
Xin chào các bạn. Như các bạn đã biết Google tạo ra một form thu thập thông tin rất đẹp với phong cách Mega Design. Trong bài viết này mình sẽ hướng dẫn các bạn chi tiết để làm được form như vậy. Đầu tiên chúng ta sẽ tạo ra file HTMl với các trường Fullname, Email, Phone và Mesage như sau: ...
Xin chào các bạn. Như các bạn đã biết Google tạo ra một form thu thập thông tin rất đẹp với phong cách Mega Design. Trong bài viết này mình sẽ hướng dẫn các bạn chi tiết để làm được form như vậy. Đầu tiên chúng ta sẽ tạo ra file HTMl với các trường Fullname, Email, Phone và Mesage như sau:
<form>
<div class="form-detail">
<div class="form-info col-md-6 col-xs-12">
<div class="group">
<input class="control-custom" type="text"/>
<span class="bar"></span>
<label>Full name</label>
</div>
<div class="group">
<input class="control-custom" type="text"/>
<span class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input class="control-custom" type="text"/>
<span class="bar"></span>
<label>Phone</label>
</div>
</div>
<div class="form-message col-md-6 col-xs-12">
<div class="group">
<textarea class="control-custom" rows="10"></textarea>
<span class="bar"></span>
<label>Message</label>
</div>
</div>
</div>
<div class="form-button text-center">
<button class="btn btn-info" type="submit">Submit</button>
</div>
</form>
Trong code HTML form này, chúng ta sẽ sử dụng một số class của Bootstrap để hiển thị các trường cho đẹp nhưu col-md-6 hay col-xs-12, chính vì lý do đó, ở file HTML, chúng ta cần bổ sung thêm đường dẫn để gọi đến file bootstrap.min.css thì mới có thể sử dụng framework này:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
Chúng ta sẽ bổ sung thêm thuộc tính required vào mỗi thẻ input html để validate bắt buộc người dùng phải nhập liệu để cảm nhận hiệu ứng của form mình phải không nào
