Hướng dẫn cách tạo Form trong HTML

Posted on by mtoplistChuyên mục:Top List

Hướng dẫn cách tạo Form trong HTML

Một trang web hoàn chỉnh sẽ có khá nhiều chức năng trong đó tạo Form action trong HTML như đăng ký, đăng nhập, form nhập liệu để gửi lên Server để lưu thông tin.

HTML sẽ giúp thiết kế phần giao diện còn để các thông tin được lưu trữ thì bạn cần đọc thêm bài viết Cách tạo Form đăng ký bằng PHP và MySQL

Có nghĩa là khi một người dùng (user) thực hiện thao tác đăng ký ngôn ngữ lập trình PHP sẽ gửi yêu cầu thêm thành viên vào cơ sở dữ liệu và lưu trữ ở đó.

Còn trong bài viết này mình sẽ chỉ hướng dẫn bạn biết cách xây dựng phần giao diện tạo Form chứ không có chức năng gì hết cả nhé!

Cách tTạo Form đăng ký bằng HTML

Đầu tiên bạn sẽ chạy đoạn code sau:

<form action="#" method="post" name="dang-ky">

Tên đăng nhập:<br/>

<input type="text" name="username" placeholder="Nhập tên đăng ký" /> <br />

Mật khẩu:<br/>

<input type="password" name="password" placeholder="Nhập mật khẩu" /> <br />

<input type="submit" name="submit" value="Đăng ký" />

</form>

Mình sẽ giải thích từng dòng một nhé!

Khi tạo Form bắt buộc đoạn code sẽ phải bắt đầu bằng <form> và kết thúc bằng </form>

action: khai báo dữ liệu tới một file xử lý dữ liệu trong PHP sẽ có đuôi .php

method: phương thức khai báo dữ liệu. (Mình sẽ nói rõ hơn ở bài viết khác)

name: tên bạn đặt cho Form

type: Kiểu input đối với tên và thông tin và đặt là text còn mật khẩu đặt password, đăng ký đăng nhập thì dùng submit

placeholder: dòng chữ hiển thị trong ô trống

input: một điều khiển mà cho phép người sử dụng nhập dữ liệu đầu vào.

Bạn copy toàn bộ code trên cho vào Notepad++ ấn Ctrl + Shift + S để lưu và đặt tên file là dangky.html.

Kết quả như hình dưới:

Form đăng ký HTML

Để Form đăng ký đẹp hơn bạn có thể thêm CSS vào bằng cách chèn class vào thẻ Form:

<form action="#" method="post" name="dang-ky" class="dangky">

Tên đăng nhập:<br/>

<input type="text" name="username" placeholder="Nhập tên đăng ký" /> <br />

Mật khẩu:<br/>

<input type="password" name="password" placeholder="Nhập mật khẩu" /> <br />

<input type="submit" name="submit" value="Đăng ký" class="submit"/>

</form>

Và thêm đoạn CSS sau:

.dangky {
width: 200px;
background: red;
padding: 20px;
margin: 0 auto;
}
.dangky .submit {
margin: 10px auto;
border-radius: 10px;
}

Dưới đây là toàn bộ Code trong một File là dangky.html

Hướng dẫn cách tạo Form trong HTML

Tạo Form đăng nhập bằng html và css

Đối với Form đăng nhập bạn cũng làm tương tự như đăng ký nhé!

Kết luận: Form trong HTML là kiến thức cần biết khi tìm hiểu về ngôn ngữ này. Hãy thực hành liên tục bằng cách tự viết lại code chứ tuyệt đối không copy để học HTML tốt hơn nhé!

mtoplist