Cara membuat form akun sekolah menggunakan menggunakan html

Di antara fitur penting dari HTML adalah: tag form. Yaitu sebuah tag yang kita gunakan untuk mengkoleksi inputan dari user, konsep ini sama seperti konsep formulir di dunia nyata.

Umumnya, sebuah website selalu memiliki fitur form, contoh paling umum yang sering kita temui adalah:

form login
form sign up
form komentar di suatu blog / media

Berikut ini contoh form HTML:

Elemen `<form>`

Yang paling utama adalah tag atau element <form>. Ia adalah sebuah tag pembungkus atau kontainer yang merepresentasikan sebuah “formulir” di mana satu formulir bisa memiliki banyak kolom isian.

Elemen `<input>`

Di dalam HTML, terdapat banyak jenis model isian mulai dari teks, file, ceklis, dan sebagainya yang insyaallah akan kita bahas lebih detil pada beberapa pertemuan berikutnya. Dan sebagian besar jenis model isian tersebut menggunakan tag <input>.

Elemen `<label>`

Coba perhatikan kode HTML di atas: kita memiliki dua buah elemen <label>. Elemen <label> memang terlihat seperti elemen <span> pada umumnya, akan tetapi ia memiliki fungsi khusus: yaitu untuk melabeli sebuah field inputan. Karena ketika screen reader membaca konten halaman HTML, lalu menemukan sebuah inputan, ia akan membaca label yang bersangkutan. Fungsi lain dari tag <label> adalah: ketika kita mengklik label, maka browser akan meletakkan fokus pada kolom isian yang terhubung dengannya. Kita bisa menghubungkan sebuah <label> dan <input> dengan atribut for untuk label, dan atribut id pada <input> dengan nilai yang sama persis.

Radio Button

Berikutnya adalah kolom isian dengan tipe radio. Ia merupakan kolom isian bertipe pilihan di mana kita bisa menawarkan beberapa opsi kepada user. Akan tetapi hanya satu opsi saja yang boleh dipilih.

Check Boxes

Berikutnya adalah checkbox atau cek lis. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan dalam satu set opsi.

Elemen input berikutnya yang akan kita bahas pada pengenalan form kali ini adalah input type submit. Ia adalah sebuah <input> yang ditampilkan dalam bentuk tombol. Jika input ini diklik, maka form akan tersubmit dan browser akan mulai mengirim data.

Bagaimana Cara Memproses Form?

Ketika sebuah <form> disubmit, baik menggunakan element <button> mau pun <input type="submit">, browser akan mengirimkan data tersebut kepada URL yang didefinisikan pada atribut action di dalam tag form.

Ada pun jika atribut action tidak didefinisikan, maka browser akan menggunakan URL sekarang sebagai tujuan pengiriman data.

langsung saja kita ke tutorialnya

1. kalian buka terlebih dahulu text tool kalian

2. kita membuat codingan head/ kepalanya terlebih dahulu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

3. setelah itu kita membuat elemen body dan form

<body style="padding-left: 30%; background-image: url(https://i.ytimg.com/vi/o5UJ84sHSxE/maxresdefault.jpg); background-repeat: no-repeat; background-size: contain; -webkit-background-size: cover;">
    <form style="border: 1px solid black;width: 50%;border-radius: 15px;box-shadow: 5px 5px;background-color: white;">
        <marquee direction="right"><h1>Form AKUN SMKN Suka Maju Jaya</h1></marquee>
        <fieldset>           
        <legend>User Data login user</legend>
        <br>
        <p>Username: <input type="text" name="username" /></p>
        <p>Email: <input type="text" name="username"></p>
        <p>Password: <input type="password" name="pass" /></p>
        <br>
    </fieldset>
        
        <fieldset>
        <legend> Data diri</legend>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" value=""><br><br>
        <label for="fname">LAST name:</label><br>
        <input type="text" id="fname" value=""><br><br>
        
       <p><label for="idalamat">Alamat:</label> <input id="idalamat" type="text" name="alamat" placeholder="alamat rumah" /></p>
            <p><label for="idtanggallahir">Tanggal lahir:</label> <input id="idtanggallahir" type="date" name="tanggallahir" /></p>
            <p><label for="idusia">Usia:</label> <input id="idusia" type="number" name="usia" placeholder="usia anda" /></p>
            <p><label>Jenis kelamin:</label>
       
        <input type="radio" id="html" name="fav_language" value="HTML">
        <label for="html">pria</label>
        <input type="radio" id="css" name="fav_language" value="CSS">
        <label for="css">wanita</label>
        <br>

         <br>
         jurusan
         <select name = "dropdown">
            <option value = "RPL" selected>RPL</option>
            <option value = "TKJ">TKJ</option>
            <option value = "SIJA">SIJA</option>
            <option value = "TP">TP</option>
            <option value = "BKP">BKP</option>
            <option value = "MM">MM</option>
            <option value = "TP">TP</option>
            <option value = "TKRO">TKRO</option>
            <option value = "TJKT">TJKT</option>
            <option value = "PPLG">PPLG</option>
            <option value = "TM">TM</option>
            <option value = "TPGM">TPGM</option>
            <option value = "TITL">TITL</option>
            <option value = "DPIB">DPIB</option>
            <option value = "TTL">TTL</option>
            <option value = "TO">TO</option>
         </select>
         <br>
         <img src="https://yt3.ggpht.com/Q2Sps798ppXOCxnIR38dGPllJPTgdHFOs57a4g5aiHne603K8cUlveSbOn6eWsOxA6syN4mscw=s900-c-k-c0x00ffffff-no-rj" width="50" height="50"/>
        </fieldset>


        <fieldset>
            <p><label for="idagree">Saya bersedia mengikuti aturan forum</label> <input type="checkbox" name="bersedia_ikut" value="ya" id="idagree"></p>            
            Saran untuk form ini : <br>
         <textarea rows = "5" cols = "50" name = "description">
         </textarea>
        <br>
        <input type="reset" value="reset">
        <input type="submit" name="submit" value="submit">
        <br>
        </fieldset>
        
        <marquee direction="left"><h1>TERIMA KASIH SUDAH MENGISI FORM INI</h1></marquee>

    </form> 
</body>

4. kalian bisa mengganti gambar/ baground di codingan ini

<body style="padding-left: 30%; background-image: url(https://i.ytimg.com/vi/o5UJ84sHSxE/maxresdefault.jpg); background-repeat: no-repeat; background-size: contain; -webkit-background-size: cover;">

kalian bisa mengganti nya sesuai selera kalian

5. hasilnya akan seperti ini

segitu dulu tutorial dari saya semoga bermanfaat

Cari Blog Ini

Pwdb