Tutorial HTML: MENYAJIKAN KOMPONEN ENTRI TEKS

Posted by on
Assalamualaikum Semua



      Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang cara menyajikan komponen entri teks. Tanpa banyak basa basi lagi yu urang belajar html

       Pada HTML, terdapat komponen entri teks yang fungsinya berbeda-beda salah satunya adalah textarea. apa itu textarea? TextArea merupakan komponen entri teks yang digunakan untuk memasukan teks yang tersusun lebih dari 1 baris. Pada umumnya format textarea adalah <textarea atribute="value"> contoh atribute dan value dari text area:


berikut contoh pengkodean textarea

textarea

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1 cek form
        </title>
    </head>
    <body>
        <p>
            Silahkan diisi teks area yang tersedia
        </p>
        <p>
            <textarea name="papantulis" cols="40" rows="6">
            </textarea>
        </p>
    </body>
</html>

 Hasilnya

 Text Area dengan atribut Cols (kolom)

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <p>Silahkan diisis pada teks area yang tersedia </p>
        <textarea name="rendah" cols="30" rows="5"></textarea>
        <textarea name="rendah" cols="30" rows="10"></textarea>
        <textarea name="rendah" cols="30" rows="20"></textarea>
    </body>

</html>

 Hasilnya
Text Area dengan atribut READONLY

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <textarea name="untukdibaca" id="" cols="40" rows="6" readonly>Tulisan ini tidak dapat diubah tapi bisa disalin</textarea>
    </body>

</html>

 Hasilnya

 Text Area dengan atribut Disabled

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <textarea name="terlarang" id="" cols="40" rows="6" disabled>
            Tulisan ini tidak dapat disalin maupun diubah        
        </textarea>
    </body>

</html>

 Hasilnya

 Textfield dengan atribut password

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <form>
            Password: <input type="password" name="pwd" maxlength="6"
        </form>
    </body>

</html>

 Hasilnya

 textAreaHidden1

 <html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <form>
            Nama : <input type="textarea" name="fnama"><br>
            <input type="hidden" name="negara" value="Indonesia">
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

 Hasilnya

 textAreaHidden2

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        Nama : <input type="textarea" name="fnama" id=""><br>
        <input type="textarea" name="negara" value="Indonesia">
        <input type="submit" value="submit">
    </body>

</html>

 Hasilnya

 Uploadfile

 <html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <font face="Courier New, Courier, mono">Upload Foto</font>
        <form>
            <input type="file" name="pic" accept="image/*">
        </form>
    </body>

</html>

 radiobutton

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <p>
            Tingkat Pendidikan :
            <form>
                <input type="radio" name="pendidikan1">SD <br>
                <input type="radio" name="pendidikan2">SMP <br>
                <input type="radio" name="pendidikan3">SMA sederajat <br>
                <input type="radio" name="pendidikan4">D1 <br>
                <input type="radio" name="pendidikan5">S1 <br>
            </form>
        </p>
    </body>

</html>

 Hasilnya

 CheckboxdanImagebutton

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <p>
           Penyakit yang diderita
        </p>
        <form>
            <p>Nama Depan : <input type="text" name="fname"></p>
            <p>Nama Belakang : <input type="text" name="lname"></p>
            <input type="checkbox" name="checkbox1">Darah tinggi</input><br>
            <input type="checkbox" name="checkbox2">Asam Urat</input><br>
            <input type="checkbox" name="checkbox3">Maag</input><br>
            <p><input type="image" src="gambar/tombol.gif" alt=" Submit"></p>
        </form>
    </body>

</html>

 Hasilnya

OptionvaluedanDatalist

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <form>
            <select name="jurusan">
                <option value="informatika">informatika</option>
                <option value="metematika">matematika</option>
            </select><br>
           <input list="browsers" name="browser">
           <datalist id="browsers">
               <option value="Internet Explorer"></option>
               <option value="Firefox"></option>
               <input type="submit">
        </form>
    </body>

</html>

 Hasilnya
Gabungan dari entri tesk diatas:

 <!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <form>
            <table background="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\negeri-diawan-01.jpg" width="25%" hight="25%" >
                <tr>
                    <td colspan="2" align="center">
                        Pendaftaran
                    </td>
                </tr>
                <tr>
                    <td>
                        Nama Pengguna
                    </td>
                    <td>
                        : <input type="text" name="fname">
                    </td>
                </tr>
                <tr>
                    <td>
                        Sandi
                    </td>
                    <td>
                        : <input type="password" name="pwd" maxlength="12"
                        minlength="6"
                    </td>
                </tr>
                <tr>
                    <td>
                        Jenis Kelamin
                    </td>
                    <td>
                        : <input type="radio" name="JK">Pria <input type="radio" name="JK">Wanita
                    </td>
                </tr>
                <tr>
                    <td>
                        Tanggal Lahir
                    </td>
                    <td>
                        <input type="date">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit">
                        <input type="reset">
                    </td>
                </tr>
            </table>
        </form>
    </body>

</html>

 Hasilnya:

Comments

Post a Comment