Hãy tiếp tục đọc để biết thêm về thiết kế biểu mẫu đăng ký bằng HTML và CSS với mã, cách tạo biểu mẫu đăng ký trong HTML và CSS, v.v. Xác thực biểu mẫu đăng ký đáp ứng bằng JavaScript.

Bạn đang xem : nút đăng ký ngay bây giờ mã html

Trong hướng dẫn này, chúng ta sẽ thấy cách tạo biểu mẫu đăng ký đáp ứng bằng HTML , CSS và JavaScript. Chúng ta cũng sẽ thấy, cách tạo và các loại điều khiển HTML khác nhau và cách xác thực điều khiển HTML bằng javascript . Vì vậy, đây là một ví dụ về thiết kế biểu mẫu đăng ký bằng HTML và CSS có mã .

Cuối cùng, chúng ta sẽ xem cách nhận các giá trị điều khiển HTML bằng JavaScript .

Cách tạo biểu mẫu đăng ký trong HTML và CSS

Bây giờ, hãy để chúng tôi xem cách tạo biểu mẫu đăng ký đáp ứng . Đối với điều này, trước tiên, chúng tôi sẽ tạo một trang HTML. Bạn có thể sử dụng bất kỳ trình soạn thảo mã HTML nào như Notepad ++, VS Code, Atom, v.v. Chúng tôi sẽ sử dụng mã Visual Studio ở đây để tạo biểu mẫu đăng ký bằng HTML và CSS .

Trong Mã Visual Studio , hãy tạo một tệp có phần mở rộng là .html hoặc .htm .

Tại đây, chúng tôi sẽ sử dụng các điều khiển HTML bên dưới:

  • Hộp văn bản
  • Khung văn bản
  • Nút radio
  • Ngày tháng
  • Số
  • Email
  • Điện thoại
  • Hộp kiểm
  • Thả xuống
  • Mật khẩu
  • Nút, v.v.

Ngoài điều này, chúng tôi đã sử dụng tệp .CSS để tạo kiểu cho các điều khiển và chúng tôi đã cung cấp tham chiếu tệp .css trong tệp HTML.

Dưới đây là biểu mẫu đăng ký bằng mã html :

 & lt;! DOCTYPE html & gt;
& lt; html lang = "en-us" & gt;
    & lt; đầu & gt;
        & lt; meta charset = "UTF-8" & gt;
        & lt; title & gt; Biểu mẫu Đăng ký Đáp ứng & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "./ responsiveRegistration.css" & gt;
        & lt; script type = "text / javascript" lang = "javascript" src = "./ responsiveRegistilities.js" & gt; & lt; / script & gt;
    & lt; / head & gt;
       
    & lt; body & gt;
        & lt; h1 & gt; Biểu mẫu Đăng ký Sinh viên & lt; / h1 & gt;
        & lt; div class = "container" & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "fname" & gt; Tên: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "text" id = "fname" name = "firstname" placeholder = "Nhập tên của bạn" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "lname" & gt; Họ: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "text" id = "lname" name = "lastname" placeholder = "Nhập họ của bạn" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "email" & gt; Email: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "email" id = "email" name = "email" placeholder = "nó phải chứa @,." & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "mobile" & gt; Mobile: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "tel" id = "mobile" name = "mobile" placeholder = "chỉ cho phép 10 chữ số" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; nhãn cho = "giới tính" bắt buộc & gt; Giới tính: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "radio" id = "male" name = "đực" value = "male" / & gt; Male
                    & lt; input type = "radio" id = "Female" name = "limit" value = "Female" / & gt; Female
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "dob" & gt; Ngày sinh: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "Date" id = "dob" name = "dob" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "address" & gt; Địa chỉ: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; textarea name = "address" id = "address" cols = "30" row = "10" & gt; & lt; / textarea & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "city" & gt; City: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "text" id = "city" name = "city" maxlength = "10" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "pincode" & gt; Mã PIN vùng: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "number" id = "pin" name = "pin" maxlength = "6" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "state" & gt; State: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "text" id = "state" name = "state" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "đủ điều kiện" bắt buộc & gt; Đủ điều kiện: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; select name = "Qualification" id = "Qualification" & gt;
                        & lt; option value = "" & gt; Chọn Đủ điều kiện: & lt; / option & gt;
                        & lt; option value = "Tốt nghiệp" & gt; Tốt nghiệp & lt; / option & gt;
                        & lt; option value = "BTech." & gt; BTech. & lt; / option & gt;
                        & lt; option value = "MTech." & gt; MTech. & lt; / option & gt;
                        & lt; option value = "MCA" & gt; MCA & lt; / option & gt;
                        & lt; option value = "BCA" & gt; BCA & lt; / option & gt;
                    & lt; / select & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "specialization" & gt; Chuyên môn: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "checkbox" class = "specialization" id = "cs" name = "specialization []" value = "Computer Science" & gt; Computer Science & lt; br / & gt;
                    & lt; input type = "checkbox" class = "specialization" id = "it" name = "specialization []" value = "Công nghệ Thông tin" & gt; Công nghệ Thông tin & lt; br / & gt;
                    & lt; input type = "checkbox" class = "specialization" id = "ca" name = "specialization []" value = "Kiến trúc Máy tính" & gt; Kiến trúc Máy tính & lt; br / & gt;
                    & lt; input type = "checkbox" class = "specialization" id = "tc" name = "specialization []" value = "Tele Communication" & gt; Tele Communication & lt; br / & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; div class = "col-10" & gt;
                    & lt; label for = "password" & gt; Password: & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "col-90" & gt;
                    & lt; input type = "password" id = "password" name = "password" maxlength = "8" & gt;
                & lt; / div & gt;
            & lt; / div & gt;
            & lt; div class = "row" & gt;
                & lt; input type = "submit" value = "Đã đăng ký" onclick = "SaveStudentDetails ()" & gt;
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / body & gt;
& lt; / html & gt;  

tệp .CSS cho biểu mẫu đăng ký đáp ứng sẽ giống như bên dưới:

  * {box-sizing: border-box;
}
input [type = text], input [type = email], input [type = number], input [type = select], input [type = date], input [type = select], input [type = password], input [type = tel]
{
    chiều rộng: 45%;
    đệm: 12px;
    border: 1px solid rgb (168, 166, 166);
    bán kính đường viền: 4px;
    thay đổi kích thước: dọc;
}
textarea {
    chiều rộng: 45%;
    đệm: 12px;
    border: 1px solid rgb (168, 166, 166);
    bán kính đường viền: 4px;
    thay đổi kích thước: dọc;
}
input [type = radio], input [type = checkbox] {
    chiều rộng: 1%;
    padding-left: 0%;
    border: 1px solid rgb (168, 166, 166);
    bán kính đường viền: 4px;
    thay đổi kích thước: dọc;
}
h1 {
    font-family: Arial;
    font-size: vừa;
    font-style: normal;
    font-weight: bold;
    màu nâu;
    text-align: center;
    text-decoration: gạch chân;
}
nhãn mác{
    đệm: 12px 12px 12px 0;
    display: inline-block;
}
input [type = submit] {
    màu nền: # 4CAF50;
    màu trắng;
    đệm: 12px 20px;
    biên giới: không có;
    bán kính đường viền: 4px;
    con trỏ: con trỏ;
    float: trái;
}
input [type = submit]: di chuột qua {
màu nền: # 32a336;
}
.thùng đựng hàng{
    bán kính đường viền: 5px;
    màu nền: # f2f2f2;
    đệm: 20px;
}
.col-10 {
    float: trái;
    chiều rộng: 10%;
    margin-top: 6px;
}
.col-90 {
    float: trái;
    chiều rộng: 90%;
    margin-top: 6px;
}
.row: sau {
    Nội dung: "";
    hiển thị: bảng;
    rõ ràng: cả hai;
}
@media screen and (max-width: 600px) {
    .col-10, .col-90, input [type = submit] {
        chiều rộng: 100%;
        margin-top: 0;
    }
}  
  • box-sizing: border-box; – Đây là một thuộc tính CSS, đặt giá trị được tính toán của tổng chiều rộng và chiều cao của một biểu mẫu.
  • < strong> .container – Lớp vùng chứa này được sử dụng để lưu trữ tất cả các đối tượng trong bộ nhớ.
  • .col-10 , .col-90 – Ở đây chúng tôi đã chia màn hình thành hai phần từ 100% tổng chế độ xem lưới đáp ứng. Một là col-10 , chiếm 10% tổng màn hình. Nó bao gồm tất cả các nhãn như Tên, Họ, Email, Di động, v.v.) Tương tự, col-90 , chiếm 90% tổng màn hình. Nó bao gồm tất cả các trường như trường văn bản, vùng văn bản, trường số, trường mật khẩu, trường ngày, v.v.
  • @media – Đây là một truy vấn CSS được sử dụng để sử dụng tất cả độ phân giải màn hình (chẳng hạn như điện thoại di động, máy tính bảng, máy tính để bàn, máy tính xách tay, v.v.)

Và bây giờ biểu mẫu đăng ký trong html và css trông giống như bên dưới:

thiết kế biểu mẫu đăng ký trong html và css với mã thiết kế biểu mẫu đăng ký trong html và css với mã

Đây là ví dụ về biểu mẫu đăng ký đơn giản bằng mã html và mã css.

Đọc: Không gian làm việc của Visual Studio Code là gì

Xác thực biểu mẫu đăng ký đáp ứng bằng JavaScript

Bây giờ, hãy để chúng tôi xem cách xác thực các điều khiển HTML bằng JavaScript. Ở đây chúng tôi đã thêm một .js và tham chiếu nó trong tệp .HTML.

Và chúng tôi đã thêm một hàm JavaScript dưới dạng validateControls (); để xác nhận. Đoạn mã trông giống như bên dưới:

  chức năng SaveStudentDetails () {
    validateControls ();
}
var giới tính;
var specialization = [];
function validateControls () {
    //Họ
    var fname = document.getElementById ("fname")
    if (fname.value == "") {
        window.alert ("vui lòng nhập tên của bạn");
        fname.focus ();
        trả về sai;
    }
    //Họ
    var lname = document.getElementById ("lname")
    if (lname.value == "") {
        window.alert ("vui lòng nhập họ của bạn");
        lname.focus ();
        trả về sai;
    }
    //E-mail
    var email = document.getElementById ("email")
    if (email.value == "") {
        window.alert ("vui lòng nhập Id email hợp lệ của bạn");
        email.focus ();
        trả về sai;
    }
    // Di động
    var mobile = document.getElementById ("mobile")
    if (mobile.value == "") {
        window.alert ("vui lòng nhập 10 số điện thoại di động của bạn.");
        mobile.focus ();
        trả về sai;
    }
    //Giới tính
    giới tính = document.querySelector ('input [tên = "giới tính"]: đã kiểm tra');
    if (giới tính === null) {
        window.alert ("Giới tính bắt buộc!");
        giới tính.focus ();
        trả về sai;
    }
    // Dob
    var dob = document.getElementById ("dob")
    if (dob.value == "") {
        window.alert ("vui lòng nhập Ngày sinh của bạn");
        dob.focus ();
        trả về sai;
    }
    //Địa chỉ nhà
    var address = document.getElementById ("address")
    if (address.value == "") {
        window.alert ("vui lòng nhập chi tiết địa chỉ của bạn");
        address.focus ();
        trả về sai;
    }
    //Thành phố
    var city = document.getElementById ("thành phố")
    if (city.value == "") {
        window.alert ("vui lòng nhập tên thành phố của bạn");
        city.focus ();
        trả về sai;
    }
    // Ghim
    var pin = document.getElementById ("pin")
    if (pin.value == "") {
        window.alert ("vui lòng nhập mã PIN Khu vực 6 chữ số của bạn");
        pin.focus ();
        trả về sai;
    }
    // Tiểu bang
    var state = document.getElementById ("state")
    if (state.value == "") {
        window.alert ("vui lòng nhập tên tiểu bang của bạn");
        state.focus ();
        trả về sai;
    }
    //Bằng cấp
    var Qualification = document.getElementById ("đủ điều kiện")
    nếu (đủ điều kiện.selectedIndex & lt; 1) {
        window.alert ("vui lòng chọn bằng cấp của bạn");
        trình độ.focus ();
        trả về sai;
    }
    // Chuyên môn

    var specializationArray = document.getElementsByClassName ('chuyên môn hóa');
    for (var i = 0; specializationArray [i]; ++ i) {
        if (specializationArray [i] .checked) {
            specialization.push (specializationArray [i] .value);
        }
    }
    if (chuyên môn hóa == "") {
        alert ("Yêu cầu chuyên môn!");
        trả về sai;
    }
    // Mật khẩu
    var password = document.getElementById ("mật khẩu")
    if (password.value == "") {
        window.alert ("vui lòng nhập mật khẩu của bạn");
        password.focus ();
        trả về sai;
    }

    getControlValues ​​();

}  

Đây là cách chúng tôi có thể xác thực các điều khiển HTML bằng JavaScript .

Xác thực Hộp kiểm

Bên dưới mã JavaScript, chúng tôi có thể sử dụng để xác thực hộp kiểm ở dạng HTML bằng JavaScript .

  var specializationArray = document.getElementsByClassName ('specialization');
for (var i = 0; specializationArray [i]; ++ i) {
if (specializationArray [i] .checked) {
specialization.push (specializationArray [i] .value);
}
}
if (chuyên môn hóa == "") {
alert ("Yêu cầu chuyên môn!");
trả về sai;
}  

Xác thực trình đơn thả xuống

Mã bên dưới, chúng tôi có thể sử dụng để xác thực trình đơn thả xuống trong HTML bằng JavaScript .

  var Qualification = document.getElementById ("đủ điều kiện")
nếu (đủ điều kiện.selectedIndex & lt; 1) {
window.alert ("vui lòng chọn bằng cấp của bạn");
trình độ.focus ();
trả về sai;
}  

Xác thực nút radio

Dưới đây là mã JavaScript để xác thực các nút radio trong HTML .

  world = document.querySelector ('input [name = "world"]: đã kiểm tra');
if (giới tính === null) {
window.alert ("Giới tính bắt buộc!");
giới tính.focus ();
trả về false;  

Đây là cách tạo biểu mẫu đăng ký trong html có xác thực .

Đọc: Cách thay đổi màu nền trong mã studio trực quan

Nhận các giá trị điều khiển HTML bằng JavaScript

Bây giờ, hãy để chúng tôi xem cách nhận các giá trị điều khiển HTML bằng JavaScript . Đối với ví dụ cụ thể này, tôi đã hiển thị các giá trị trong một hộp cảnh báo.

Dưới đây là mã JavaScript:

  hàm getControlValues ​​() {
    alert ("First Name =" + fname.value + "\ n" + "Last Name =" + lname.value + "\ n" + "Email =" + email.value + "\ n" + "Mobile =" + mobile.value + "\ n" + "Gender =" + gender.value + "\ n" + "DateOfBirth =" + dob.value + "\ n" + "Address =" + address.value + "\ n "+" City = "+ city.value +" \ n "+" Pin = "+ pin.value +" \ n "+" Bang = "+ state.value +" \ n "+" Đủ điều kiện = "+ bằng cấp .value + "\ n" + "Specialization =" + specialization + "\ n" + "Password =" + password.value)
}  

Đây là cách chúng tôi có thể nhận các giá trị kiểm soát HTML bằng JavaScript .

Bạn có thể thích các hướng dẫn sau:

Trong hướng dẫn này, chúng tôi đã tìm hiểu về biểu mẫu đăng ký đơn giản trong HTML , CSS và JavaScript. Nó sẽ giải quyết các truy vấn dưới đây:

  • Thiết kế biểu mẫu đăng ký trong html và css với mã
  • Cách tạo biểu mẫu đăng ký trong html và css
  • Cách tạo biểu mẫu đăng ký trong html có xác thực
  • Cách tạo biểu mẫu đăng ký bằng mã html và css

Sau hơn 15 năm làm việc trong các công nghệ của Microsoft như SharePoint, Office 365 và Power Platform (Power Apps, Power Automate và Power BI), tôi nghĩ sẽ chia sẻ kiến ​​thức chuyên môn về SharePoint của tôi với mọi người. Đối tượng bên ngoài đến từ Hoa Kỳ, Canada, Vương quốc Anh, Úc, New Zealand, v.v. Đối với kiến ​​thức chuyên môn của tôi và hướng dẫn về SharePoint, Microsoft đã được trao giải SharePoint MVP (8 lần), hãy xem Tiểu sử MVP của tôi . Tôi cũng đã từng làm việc trong các công ty như HP, TCS, KPIT, v.v.


Xem thêm những thông tin liên quan đến chủ đề nút đăng ký ngay mã html

Form nhập dữ liệu trong HTML

alt

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2020-10-02
  • Đánh giá: 4 ⭐ ( 3331 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cảm ơn các bạn đã theo dõi video. Hãy đăng ký kênh để xem video mới nhất nhé.
    Nhớ like và share ủng hộ mình nhé. Thank you!!!

    html css nguyenthithuylien

Code nút gọi ngay cho website bán hàng (Code Call now) full website

  • Tác giả: hocviendinhcao.com
  • Đánh giá: 4 ⭐ ( 7662 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

[HTML/HTML5] Phần 30: Form (biểu mẫu) trong HTML

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 8435 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thực hành tạo form đăng ký đẹp bằng html và css

  • Tác giả: tutrithuc.com
  • Đánh giá: 4 ⭐ ( 1113 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thực hành tạo form đăng ký đẹp bằng html và css | Html & Css. Học HTML, Học CSS, Form đăng ký, Học lập trình web.

Làm form đăng kí đơn giản bằng html css nhưng khá đẹp

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 4 ⭐ ( 7362 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào mọi người, trong bài viết này thì mình sẽ hướng dẫn các bạn làm form đăng kí bằng html và css. Chỉ với vaì thuộc tính chúng ta đã..

Share code nút đăng ký nhận thông báo cho blog/website

  • Tác giả: www.code.pro.vn
  • Đánh giá: 3 ⭐ ( 9241 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: code đăng ký nhận thông báo, nút đăng ký cho blog, nút thông báo cho website, code nút thông báo, hiệu ứng thông báo, code hiệu ứng đẹp, code noti

[Series học HTML cơ bản]

  • Tác giả: giuseart.com
  • Đánh giá: 3 ⭐ ( 5358 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này hướng dẫn cách dùng thẻ tạo form trong HTML để tạo các biểu mẫu thu thập dữ liệu người dùng. Form nhập liệu, form lựa chọn, form button và form…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Xóa khóa chính - SQL Server - thay đổi bảng xóa khóa chính

By ads_php