Membuat HTML form tag serta Element nya - HTML Form adalah tag yang digunakan untuk membuat formulir di halaman web. Formulir ini dapat digunakan untuk mengumpulkan data dari pengguna, seperti nama, alamat email, dan komentar.
Tag form digunakan untuk memulai formulir, dan tag-tag lain seperti input, textarea, dan button digunakan untuk membuat elemen formulir.
HTML Form
Contoh penggunaan tag form :
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Komentar:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Kirim">
</form>
Attribute pada tag form yang sering digunakan :
action : menentukan URL tujuan formulir dikirim
method : menentukan metode pengiriman data (GET atau POST)
Input tag digunakan untuk membuat elemen form seperti text field, checkbox, radio button, dan tombol submit.
Contoh :
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br><br>
<label for="gender">Jenis Kelamin:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Laki-laki</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Perempuan</label><br><br>
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">Berlangganan newsletter</label><br><br>
<input type="submit" value="Kirim">
</form>
Textarea digunakan untuk membuat area teks yang dapat ditulis beberapa baris. Contoh :
<label for="message">Komentar:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Kirim">
</form>
Itulah cara penggunaan tag-tag yang digunakan dalam membuat formulir di halaman web dengan menggunakan HTML. Dengan menggunakan formulir, akan memudahkan pengembang dalam menerima data dari pengguna.
Element Passwords
Password adalah elemen formulir yang digunakan untuk menerima input dari pengguna dan menyimpan informasi dengan cara yang aman. Elemen ini digunakan untuk mengumpulkan informasi yang sensitif seperti kata sandi akun pengguna.
Contoh penggunaan elemen password:
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
Element Radio Button
Radio buttons adalah elemen formulir yang digunakan untuk memungkinkan pengguna untuk memilih satu dari beberapa pilihan yang tersedia. Elemen ini digunakan ketika hanya ada satu pilihan yang dapat dipilih dari beberapa pilihan yang tersedia.
Contoh penggunaan elemen radio button:
<label for="gender">Jenis Kelamin:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Laki-laki</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Perempuan</label><br><br>
<input type="submit" value="Submit">
</form>
Element Checkboxes
Checkboxes adalah elemen formulir yang digunakan untuk memungkinkan pengguna untuk memilih lebih dari satu pilihan dari beberapa pilihan yang tersedia.
Contoh penggunaan elemen checkbox:
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">Berlangganan newsletter</label><br><br>
<input type="checkbox" id="promo" name="promo" value="yes">
<label for="promo">Ingin menerima promosi</label><br><br>
<input type="submit" value="Submit">
</form>
Elemen Pull-down lists
Pull-down lists adalah elemen formulir yang digunakan untuk menampilkan daftar pilihan dalam bentuk dropdown. Pengguna dapat memilih satu dari beberapa pilihan yang tersedia dari daftar tersebut.
Contoh penggunaan elemen pull-down list:
<label for="cars">Pilih mobil:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="Submit">
</form>
Itulah beberapa elemen formulir yang digunakan dalam pembuatan formulir di halaman web. Elemen-elemen ini dapat digunakan secara bersama-sama dalam satu formulir untuk mengumpulkan berbagai jenis data dari pengguna.
Selain elemen-elemen yang telah disebutkan di atas, masih banyak elemen formulir lain yang dapat digunakan seperti tombol, label, select, option, dan lain-lain. Semua elemen ini dapat digunakan untuk membuat formulir yang interaktif dan mudah digunakan oleh pengguna.
Namun, dalam pembuatan formulir, perlu diperhatikan juga aspek keamanan seperti validasi input dan pengamanan data yang diterima. Hal ini penting dilakukan untuk mencegah serangan peretas dan melindungi privasi pengguna.
Reset and Submit Buttons
Reset dan submit buttons adalah elemen formulir yang digunakan untuk mengirim atau mereset formulir. Elemen submit digunakan untuk mengirimkan data yang diinput oleh pengguna ke server, sedangkan elemen reset digunakan untuk mereset formulir ke kondisi awal.
Contoh penggunaan elemen reset dan submit:
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
Special input types
Special input types adalah elemen formulir yang memiliki tipe input yang khusus seperti email, url, dan tanggal. Elemen-elemen ini digunakan untuk validasi input yang lebih baik dan menyediakan fitur-fitur yang lebih interaktif seperti kalender untuk penginputan tanggal.
Contoh penggunaan special input types:
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="url">Website:</label>
<input type="url" id="url" name="url"><br><br>
<label for="birthdate">Tanggal Lahir:</label>
<input type="date" id="birthdate" name="birthdate"><br><br>
<input type="submit" value="Submit">
</form>
Elemen Hidden value
Hidden value adalah elemen formulir yang digunakan untuk menyimpan data yang tidak dapat dilihat oleh pengguna, tetapi tetap dapat diteruskan ke server. Elemen ini sering digunakan untuk menyimpan informasi seperti ID session atau ID pengguna.
Contoh penggunaan elemen hidden value:
<input type="hidden" name="user_id" value="123456">
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Submit">
</form>
FIELDSET and LEGEND
The FIELDSET and LEGEND tags adalah elemen formulir yang digunakan untuk mengelompokkan elemen-elemen formulir. Elemen fieldset digunakan untuk mengelompokkan elemen-elemen yang berhubungan, sedangkan elemen legend digunakan untuk memberikan label pada grup tersebut.
Contoh penggunaan elemen fieldset dan legend:
<fieldset>
<legend>Informasi Kontak</legend>
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">Nomor Telepon:</label>
<input type="tel" id="phone" name="phone"><br><br>
</fieldset>
<fieldset>
<legend>Informasi Alamat</legend>
<label for="address">Alamat:</label>
<textarea id="address" name="address"></textarea><br><br>
<label for="city">Kota:</label>
<input type="text" id="city" name="city"><br><br>
<label for="zip">Kode Pos:</label>
<input type="text" id="zip" name="zip"><br><br>
</fieldset>
<input type="submit" value="Submit">
</form>
Disabled attribute
Itulah beberapa elemen formulir tambahan yang dapat digunakan dalam pembuatan formulir di halaman web menggunakan HTML. Elemen-elemen ini dapat digunakan untuk menambah fitur dan interaksi pada formulir, serta membuat tampilan formulir lebih rapi dan mudah dipahami oleh pengguna
Disabled attribute adalah atribut yang digunakan untuk menonaktifkan elemen formulir. Elemen yang di nonaktifkan tidak dapat diinteraksikan oleh pengguna dan tidak akan dikirimkan ke server saat formulir dikirim. Atribut ini sering digunakan untuk menonaktifkan elemen yang tidak relevan pada saat tertentu.
Contoh penggunaan atribut disabled:
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Nomor Telepon:</label>
<input type="tel" id="phone" name="phone" disabled><br><br>
<input type="submit" value="Submit">
</form>
Navigating through a form
Navigating through a form adalah cara untuk berpindah dari satu elemen formulir ke elemen formulir lain dengan menggunakan keyboard. Ini dapat dilakukan dengan menggunakan tombol tab atau tombol panah. Hal ini memudahkan pengguna dalam mengisi formulir tanpa harus menggunakan mouse.
Access keys adalah atribut yang digunakan untuk menambahkan shortcut keyboard pada elemen formulir. Ini memungkinkan pengguna untuk mengakses elemen formulir dengan cepat dan mudah tanpa harus menggunakan mouse. Atribut ini sering digunakan pada tombol submit atau tombol reset formulir.
Contoh penggunaan atribut accesskey:
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit" accesskey="s">
<input type="reset" value="Reset" accesskey="r">
</form>
Itulah beberapa atribut dan fitur tambahan yang dapat digunakan dalam pembuatan formulir di halaman web menggunakan HTML. Atribut-atribut ini dapat digunakan untuk menambah fitur interaksi dan aksesibilitas pada formulir, serta memudahkan pengguna dalam mengisi formulir.
