ノートテキスト
ページ1:
Date Care FORM DALAM HTML Jk het perhatikan web populer seperti Google, Facebook, dan You- tube, smw web tsbt phy bagian uth menerima data yg dimasukkan alb peng- guna web isbt. Dlm HTML, utk menerima input data or pengguna, let bisa menggunakan HTML Form. Tdpt byl input date yg bs dibuat aim form, Sprt ties, check box, password, dll. 1- Form Tag iT Form Tag all tag dg kata kunci form yg digunakan sbg bagian input informasi yg diberikan oth pengguna. Setiap kt ingin membuat informasi dr peng gona, mk kt hrs but dlm Form Tag. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,0"> <Fitle>form</Title /head> <body> <form name="Contoh" action="form-submit.html" enctype="application /x-www-form-urlencoded" method="post" target="_blank"> </form> ☐ </body> </html> 2 Input Tag 27. Form tag hay deklarasi bahwa let akn membuat Form berisi input data, sdglen uthe detail input data, kt perlu menggunakan input Tay. Input ☐ Tag menggunakan kata kunci "input". <input type="text" name="Masulekan Nana"> <input type="text" name="Masukkan Email"> The future starts today.
ページ2:
Dank Pace <form action=""> <label for="jam masuk"> Jam. Masuke: </label> <input type="time" name="jam-masuk" id="jam_masuk"> </form> 13 Input Week Input week digunakan utk menerima minggu dlm setahun. Total ming- I go setahun berkisar antara 52-53 minggu, artinya itu adl maksimal nilai utk ☐ week format penulisan week bs menggunakan YYYY- ww. Yyyy adl tahun dim format 4 digit. Ww adl minggu dlm format 2 digit. Utk membatasi mi- nimal dan maksimal minggu yg dipilih, gunakan atribut min dan max. <form action=""> <label for="waletu. mulai">Waletu Molai: </label> el. <input type="week" name="waktu-mulai" id="waktv_mubai"> <input type="submit" value="Simpan"> </form> 14 Input Email Input email adl input text, namun informasi yg dimasukkan harus- ☐ lah dim format email. Jk format email the benar, scr otomatis form the aden bs di-submit. <Form action=""> <label for="email"> Email: </label> <input type="email" name="email" id="email required> <input type="submit" value="Simpan"> </form> 15. Input File Input File digunakan utk upload/unggah berkas file dr komputer kita. Saat membuat input file, agar form mengirim berkas file-nya, kita hrs menggunakan method post dan enctype multipart/form-data. The future starts today
ページ3:
Date: Page: 3 Label Tag Saat ut membuat caption ith input, direkomendasikan menggunakan Label drpd fels polos / tag seperti p/div. Label tag bs dikaitkan do input, x- hingga menghelile tulisan Label ser otomatis folus berpindah he input. Label me- ☐ miliki attribute "for" yg bs digunakan utk menentukan input ld yg dipilih otk dit- sosiasikan <form name="registrasi"> </br> <label for="nama" > Nama:</label> <br> <input id="nama" name="Nama" type="text"> 4. Input Submit Saat membuat Form, let bs menambahkan tombol yg bs diguna- kan utk mengirim data yg dinputkan didlm Form/dslot Submit. Tombol Submit bs et but menggunakan Input dg type Submit. <form name="registrasi" action="submit.html" method="post"> <<label for="nama "> Nama: </label> <br> <input id="nama" name="Nama" type="text"> <br> <input type="submit" value="Registrasi"> </form> 5- Input Reset Imput reset adl imput yg alem ditampilkan dlm btk tombol. Jk som bul Reset dikalike, mk slrh input di form tsbt nilainya akn berubah mjd nibi default. |<input type="reset" value="Reset"> 6. Input Button Membuat tombol the hny bs menggunakan impot type submit /reset, let ig las menggunakan input type button. Namun, menggunakan input type bot- ton the bs brgn jk hny menggunakan HTML. Biasanya, pembuat web when me- nambahkan interaksi dg JavaScript. Follow your dreams.
ページ4:
Date
Page
<form>
<input type="button" value="Hello" onclick="alert("Hello')">
<input type="button" value="World" onclick="alert ("World")">
</form>
7. Input Checkbox
Checkbox adl input dy tipe ceklis yg di mana ket bs ceklis / tidak
input tsbt. Biasanya, Checkbox digunakan utk menerima input lebih dr satu, ma-
mun inputnya sdh disesuaikan.
<form>
<p> Hobby: </p> <br>
HAD S
<input type="checkbox" name="hobby" id="coding" value="Cooling">
<label for="coding"> Coding </label> <br>
<input type="checkbox" name="hobby" id="gaming" value="Gaming">
<label for="gaming"> Gaming </label> <br>
</form>
8. Input Color
Input type color adl type uth menerima input warna. Warna dlm HT-
ML akan ditulis dim 6th hex code.
<form action="">
<label for="favorite"> Warna Kesukaan: </label>
<input type="color" name="Favorit" id="favorite" value="#FF0000">
<input type="submit value = "Simpan">.
</form>
Input Date
Input type date ad jenis input utk menerima informasi brp tanggal
(tahun, bulan, dan tanggal). Jk ingin mengubah nilai value di input type date,
kita bs menggunakan format YYYY-mm-dd di mana YYYY adl tahvu dlm
4 digit, mm adl bulan dlm 2 digit, dan ddadl hari alm 2 digit.
Yg
The future starts today.
ページ5:
Diste Page <input type="submit" value="Simpan"> </form> 19- Input Password Input type password ad input utk informasi teks sama seperti input type text. Namun pd input type password, karakter tidak akan stampilkan (masking). Input type password syt cocole uthe input teks yg rahasia, sehingga tidak bs diin- tip olh org lain. <form action="" method="post"> <label for="password">Password: </label> <input type="password" name="password" id="password"> <input type="submit" value="Masuk"> </form> 20 Input Radio $1 Input type radio ad input utle informasi pilihan. Pd checkbox, kt bs memilih lebih dr satu. Sdgkn pd radio, hny bs memilih salah satu. <form action=""> <p> Rata-rata penghasilan sebulan: </p><br> A: <input type="radio" name="jawaban" id="jawaban 1" value="a"> <label for="jawaban 1" > Di atas 7 juta </label's <input type="radio" name="jawaban" id="jawaban 2" value="b"> <label for="jawaban2"> 7 juta ke bawah </label </form> 21 Input Range Yg Input type range ad input the sumber/angka, namvu ditentukan jang- kavan thinimal dan maksimalnya. Bedanya dg input type number all bik kom- ponennya yaitu Slider bs di-slide ke kiri utk menurunkan nilai dan ke kanan the menaikkan nilai. Scr default, nilai range naik bertahap sbyk +1 / berkurang sbyle -1, namun jk ingin mengubah nilai naik dan turunnya, gunakan atribute range. The future starts today.
ページ6:
Date
Page
[
<form action="">
<label for="join-date"> Tanggal Masule: </label>
<input type="date" name="join-date" id="join-date">
</form>
10. Input Date Time
Jk input tanggal, b65 menggunakan type date. Namun, jk butuh
sampat ke merit, gunakan Input Date Time yo di mana menggunakan
type datetime-local. Format value utle Input Date Time adl YYYY-mm
(-dd Thhimm yg di mana tanggal dan wit dipisah oleh karakter T. Hh
adl jam dlm format 2 digit. Mm adl dim-formait 2 digit as
<form action=">==
<label for="
>
"jam masuk"> Jam Masules </label>
<input type="datetime-local" name="jeim-musuke" id="jam_masuk">
<input type="submit" value="{Simpain">.
</form>
11-Input Month
Input type month digunakan utle input informasi brp tahun dan
bulan. Yyyy adl tahun dlm Format 4 digit. Mm adl bulan dlm format
2 digit.
<form action="
<label for="expired">Bulan Kadaluarsa'</label>
<input type="month" name="month" id="expired" value="Expired">
<input type="submit" value="Simpan">
</form>
12. Input Time
Input time digunakan ketika hanya membutuhkan informasi jam
dan menit menggunakan format hh:mm. Hh adl jam dlm format 2 digit.
Mm adl menit dlm format 2 digit.
Follow your dreams.
ページ7:
Date: Page 1 <form action="receive.html" method="post" enctype="multipart/form-data"> <label for="profile"> Foto Profil: </label> <input type="file" name" "profile" id="profile"> <input type="submit" value="Kirim"> </form> 16 Input Hidden Input hidden artinya datanya tidak terlihat oleh pengguna web. Bi- lasanya, input hidden tk dinksdlken utk diinputkan olh pengguna. Biasanya, polka- sus tertentu, input hidden digunakan utk informasi yg dibuat scr domatis. <form action=""> <input type="hidden name="user_id" value="Someone"> <label for="nama"> Nama: </label> <input type="text" name="nama" id="nama"> <input type="submit" value="Simpan"> </form> 17 Input Image Input type image bkn utk input brp berkas gambar, melainkan utk mbwt tombol submit brp gambar. Input type button/submit/reset menggu- nakan text utk tombolnya, sdgkn image menggunakkan gambar yg bs diubah. menggunakan atribut safic. <label for="nama">Nama: </label> <input type="text" name="nama" id="name"> <input type="image" src="...." " alt="Submit"> 18 Input Number Input number ad input utk informasi angka. Jk menyinputhan yg bken anyka, ser otomatis HTML menganggap nilainya tidak valid. <form action=""> 37 <label for="nilai_ujian"> Nilai Ujian: </label> <input type="number" name="nilai_ujian" id="nilai_ujian" Follow your dreams. max="100">
ページ8:
Pate Page <form action=""> dabel for="deskripsi > Deskripsi: </label> <br> <textarea name="deskripsi" id="deskripsi" cols="50" rows="10">1si kolom di sini</textarea> <input type="submit" value="Simpan"> </form> 25 Button Tag Button tag adl tag yg bs digunakan utk mbut tombol. Button tag pny content dlm tagnya, sehingga bs menambahkan text/gambar. <form action=""> <label for="name">Nama: </label> <input type="text" name="name" id="name"> <button type="submit" <img src=""> </button </form> 26. Select Tag ' Select tag adt alternatif lain seperti input type radio. Select tag menawarkan solusi sederhana, di mana input seperti type text. Namun, kt bs memilih opsi pilihan seperti checkbox dan radio. a. Option Tag Gunakan option tag utk menambah opsi pilihan select tag. Option tag phy atribut valve slog nilainya, namun utk ditampilkan dlm Web Browser, bs isi dg content. <form action=""> <label for="hobby">Hobi: </label> <select name="hobby" id="hobby"> <option value="Coding" selected > Coding </option> <option value="gaming" > Gaming </option> </select> The future starts today.
ページ9:
Date
Pagn
<form action="">
<label for="penghasilan _ rata 2" > Penghasilan rata-rata sebulan (dalam juta):
</label>
<input type="range" name="penghasilan rata2" id="penghasilan _rata?",
="0" max="999" stop="10">
</form>
22 Input Telefon
Input type telepon bs digunakan uthe input, informasi telefon. Namun
berbeda dg number, aturan di input telepon lars ditentukan sendiri krn format
telefon setiap negara berbeda-beda. Gunakan atribut pattern uth ubahn aturan
Format nomor telepon.
<form action="">
<label for="telepon">Masukkan nomor telepon! </label>
<input type="telepon" name="telepon" id="telefon" pattern="(62) [0-9]{5,20]>
<input type="submit" value="Simpan">
</form>
23 Input URL
Input type URL digunakan utk menerima input data dlm btle URL,
Seperti alamat website pribadi, website social media, dll. Jk format URL tidak
valid, mle HTML the alen menerima input data URL tsbt.
<form action="">
<label for="link"> Link: </label>
<input type="URL" name="link" id="link">
<input type="submit" value="Simpan">
</form>
24 Text Area Tag
text
HTML jg menyediakan lag textarea yg bs digunakan utk input
multi baris. Utle menentukan panjang input, gunakan atribut cols dan
utk menentukan tinggi input, gunakan rows.
Yo
Follow your dreams.
ページ10:
Date: Page: <button type="submit"> Simpan </button> </form> b. Multiple Tay Slh satu kelebihan dibandingkan radio type, select area bs menggunakan atribut multiple. Utle menentukan sbrp bsr tampilan ketika mengguna- kan multiple, gunakan atribut size. <form action=""> <label for="hobby"> What is your hobby? </label> <select name="hobby" id="hobby" multiple size="4"> <option value="coding"> Coding </option> <option value="gaming">Gaming </option> <option value="reading"> Reading </option> <option value="writing"> Writing </option> Select> </form> C. Option Group Tag Option group dibuat ketk pilihan sgt byk. Bungkus option group dg opt- group tag. Uthe menambahkan deskripsi grup, gunakan atribut label. <form action=""> <label for="mapel- peminatan "> Mata Pelajaran Pemination: </label> <select name="mapel-peminatan" id="mapel-peminatan > <opt group label="IPA (saintek)"> <option value="biologi">Biologi </option> <option value="Fisika"> Fisika </option> <option value="kimia" > Kimia </option> </optgroup> <optgroup label="IPS (Soshum)"> <option value="ekonomi" >Ekonomi </option> <option value="sosiologi" >Sosiologi </option> <option value="geografi" > Geografi </option> <loptgroup> </Belect> Follow your dreams.
ページ11:
Date Pige </form> 27. Data List Tag Data list tag digunakan utk menambahkan sumber data sby re- komendasi input value. Dlm data list tay, be menggunakan option tag. Uth menghubungkan input text ke data list, bs menggunakan atribut list yg me- ngacu ke id data list. <form action=" <label for="hobby">Hobby: </label> <input type="text" name="hobby"list="hobbies"> <button type="submit"> Simpan </button> <datalist id="hobbies"> <option value="coding">Coding </option> <option value="gaming"> Gaming </option> <option value=" reading"> Reading </option> <option value="writing">Writing </option </datalist> </form> 28 Field Set Tag Tag fieldset digunakan uth grouping bbrp input shy lebih mudah dime- Ingerti kotle dilihat oh pengguna. Menggunakan fieldset tag sgt berguna ketk input data yg sgt byk dan ingin grouping input data 79 sesvai. Saat menggunakn fieldset tag, biasanya informasi ditambahkan brp deskripsi group. Utk menam- bahkan informasi itu, gunakan legend tag. <Form action=""> <fieldset> <legend> Identitas </legend> <label for="nama">Nama:</label> <input type="text" name="nama" id="nama"> <label for="email"> Email: </label> <input type="email" name="email" id="email"> </fieldset> </form> The future starts today.
ページ12:
Date: Page: Bedanya atribut name dan id? 1. Tujuan 10 Cid) digunakan utk manipulasi DOM JavaScript, styling CSS, dan tav- tan anchor (#). Sdgken, name digunakan olh server utk mengenali data input sth formulir dikirim. 2. Pengiriman Data ID (id) the dikirim ke server, sdglen name dikirim ke server. Follow your dreams.
他の検索結果
News
コメント
コメントはまだありません。