[Tugas Pertemuan ke-4] Form Registrasi

Membuat Form

Nama: Lucky Virgiawan Dwi Widodo
NRP: 5053231007
Kelas: Pemrograman Web (M)



Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Page</title>
    <style>
        body {
            background-color: Lightskyblue;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        h2 {
            text-align: center;
            margin-top: 50px;
            color: #333;
        }
        .container {
            background-color: white;
            width: 50%;
            margin: 0 auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }
        input[type="text"], input[type="email"], input[type="password"], select, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="radio"] {
            margin-right: 10px;
        }
        textarea {
            resize: none;
        }
        input[type="button"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="button"]:hover {
            background-color: #45a049;
        }
        .radio-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .radio-group label {
            margin-right: 15px;
        }
        .input-group {
            display: flex;
        }
        .input-group input[type="text"] {
            width: 120%;
        }
    </style>
</head>
<h2>Form Registrasi Unit Kegiatan</h2>
<body>
    <div class="container">
        <form>
            <div class="input-group">
                <div style="margin-right: 80px;">
                    <label>Nama Depan</label>
                    <input type="text" name="firstname" />
                </div>
                <div>
                    <label>Nama Belakang</label>
                    <input type="text" name="lastname" />
                </div>
            </div>
            
            <label>Unit Kegiatan</label>
            <select>
                <option value="Olahraga">Olahraga</option>
                <option value="Seni">Seni</option>
                <option value="Bela Diri">Bela Diri</option>
                <option value="Robotik">Robotik</option>
                <option value="Otomotif">Otomotif</option>
                <option value="Keagamaan">Keagamaan</option>
                <option value="Kewirausahaan">Kewirausahaan</option>
            </select>

            <div class="radio-group">
                <label>Gender:</label>
                <input type="radio" name="gender" value="male">Male
                <input type="radio" name="gender" value="female">Female
            </div>

            <label>No. HP:</label>
            <div class="input-group">
                <input type="text" name="country code" value="+62" size="2"/>
                <input type="text" name="phone" size="10"/>
            </div>

            <label>Alamat</label>
            <div class="input-group">
                <textarea cols="30" rows="5"></textarea>
            </div>

            <label>Email</label>
            <div class="input-group">
                <input type="email" id="email" name="email"/>
            </div>

            <label>Password</label>
            <div class="input-group">
                <input type="password" id="pass" name="pass"/>
            </div>

            <label>Re-type Password</label>
            <div class="input-group">
                <input type="password" id="repass" name="repass"/>
            </div>

            <input type="button" value="Submit"/>
        </form>
    </div>
</body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

[Tugas Study Case] Simple Landing Page

Gambar
Simple Landing Page Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link GitHub:  https://github.com/rukiwatsuyoidesune/Web-LandingPage Link Website:  https://topupin-landing-page.vercel.app Source Code: <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> TopUpin! </title> <link rel= "preconnect" href= "https://fonts.googleapis.com" > <link rel= "preconnect" href= "https://fonts.gstatic.com" crossorigin > <link href= "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" rel= "stylesheet" > <style> * { margin : 0px ; padding : 0px ; ...
Baca selengkapnya

[Tugas Pertemuan ke-1] Portofolio

Gambar
 Membuat Web Portofolio Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link Website Portofolio:  https://luckyvdw.vercel.app/ Link Repo GitHub:  https://github.com/rukiwatsuyoidesune/Web-Portfolio Link CV:  https://drive.google.com/file/d/1Hrije4sIHTRPKH9X0Nuk83PHi4sjhRvr/view?usp=sharing Link Blogspot:  https://luckyvdw.blogspot.com Pertemuan pertama minggu lalu, kami diajarkan pengantar web programming. Lalu sebelum kelas berakhir, kami diberi tugas untuk membuat website portofolio/pribadi dengan memuat CV. Berikut adalah yang saya lakukan untuk mengerjakan tugas ini: 1. Memahami konsep penggunaan elemen HTML. 2. Memahami perbedaan antara header, body, main, div, section, dan article. 3. Mengatur layout website dan menggunakan CSS. 4. Membuat dan mengupload repository ke github. 5. Menggunakan vercel untuk men-deploy website.
Baca selengkapnya

[Tugas Pertemuan ke-3] Tabel

Gambar
Membuat Tabel Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Tabel Nilai Siswa Source Code (HTML): <!DOCTYPE html> <html lang= "id" > <head> <title> HTML Table </title> <style> table , th , td { border : 2px solid black; border-collapse : collapse ; } th , td { padding : 10px ; } </style> </head> <body> <table style= "width:75%" > <thead style= "background-color: #305bb1;" > <tr> <th rowspan= "2" style= "color: white;" > Nama </th> <th colspan= "3" style= "color: white;" > Nilai </th> </tr> <tr> <th style= "color: white;" > Kimia </th>...
Baca selengkapnya