Learning HTML - HTML Forms and Input Controls
This episode breaks down HTML forms: the form element with action and method, input controls from text to radio, textarea, select, and button, complete with a login form practice.
#Introduction
So far your pages have only displayed information. Episode 8 opens the door to interacting with users through HTML forms and input controls — how to collect text, choices, and actions from page visitors.
Forms are the gateway to many web features: login, search, registration, and comments. Understanding form, input, textarea, select, and button is a skill you'll keep using, including when building validation in episodes 9 and 17.
#The form Element
#action and method
form wraps all the controls and defines where data is sent:
<form action="/proses-pendaftaran" method="post">
<p>Isi data di bawah ini.</p>
</form>actionholds the destination address for the submitted data.methoddetermines how data is sent:getorpost.
With method="get", the data is visible in the URL as a query string, suited to searches. With method="post", the data is sent in the HTTP request body, suited to sensitive data like passwords.
#The name Attribute
Every control whose data you want to submit must have a name attribute. The name-and-value pairs the user fills in are sent as form data — controls without name are ignored.
#Text Input Controls
#input type="text" and password
input is the most flexible control; its behavior depends on type:
<p>
<label>Nama pengguna</label>
<input type="text" name="nama" maxlength="50">
</p>
<p>
<label>Kata sandi</label>
<input type="password" name="sandi">
</p>type="password"hides the characters being typed.maxlengthlimits the number of characters.
The best practice for writing correct labels will be covered thoroughly in episode 9.
#Choice and Long-Text Controls
#checkbox and radio
For binary choices and single selections:
<p>
<label>
<input type="checkbox" name="setuju" value="ya">
Saya setuju dengan ketentuan.
</label>
</p>
<p>
<label>
<input type="radio" name="ukuran" value="kecil">
Ukuran kecil
</label>
</p>
<p>
<label>
<input type="radio" name="ukuran" value="besar">
Ukuran besar
</label>
</p>Radios with the same name form one group — only one can be selected.
#select and textarea
select creates a dropdown menu of options; textarea is for multi-line text:
<p>
<label>Kota</label>
<select name="kota">
<option value="jkt">Jakarta</option>
<option value="bdg">Bandung</option>
</select>
</p>
<p>
<label>Pesan</label>
<textarea name="pesan" rows="4" cols="40"></textarea>
</p>rows and cols on textarea set the initial height and width. A textarea holds empty text between its opening and closing tags as the initial value.
#The button Element
#Three Button Types
button has three type values:
submit: submits the form, the default value.reset: clears all controls.button: does nothing on its own — for wiring up with JavaScript.
<button type="submit">Kirim</button>
<button type="reset">Bersihkan</button>
<button type="button">Hitung Total</button>A submit button that doesn't state its type still behaves as submit. For buttons that will be driven by JavaScript, always write type="button" explicitly.
#Exercise: A Login Form
Combine the controls you've learned:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masuk</title>
</head>
<body>
<h1>Masuk ke Akun</h1>
<form action="/masuk" method="post">
<p>
<label>Nama pengguna</label>
<input type="text" name="nama" maxlength="30">
</p>
<p>
<label>Kata sandi</label>
<input type="password" name="sandi">
</p>
<p>
<label>
<input type="checkbox" name="ingat" value="ya">
Ingat saya
</label>
</p>
<p>
<button type="submit">Masuk</button>
</p>
</form>
</body>
</html>Once the page renders, open DevTools and inspect the form object from the console with document.forms[0] to see the form's properties and controls.
#Closing
Episode 8 makes your pages accept input: form with action and method, input with various types, textarea, select, checkbox, radio, and button with its three types.
Key takeaways:
formwraps controls;actionandmethoddefine the submission target.- Controls without
namedon't send data. typeoninputdetermines behavior;typeonbuttondetermines action.- Radios with the same
nameform one group. placeholderis only example text, not a substitute forlabel.
In the next episode, episode 9, we'll cover label, fieldset, and form accessibility — connecting label to controls, grouping choices with fieldset and legend, and the mistakes that often break form accessibility.