BELAJAR
HTML2
HTML
Forms
1. HTML
Forms
Text Input
·
Penjelasan:
Di gunakan untuk membuat kolom yang biasanya digunakan untuk login.
·
Script:
<!DOCTYPE
html>
<html>
<body>
<form>
First
name:<br>
<input
type="text" name="firstname">
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
</body>
</html>
·
Output:
Radio Button Input
·
Penjelasan:
Di gunkan untuk memilih salah satu hal, biasanya
digunakan untuk memilih jenis kelamin.
·
Scipt:
<form>
<input
type="radio" name="sex" value="male"
checked>Male
<br>
<input
type="radio" name="sex" value="female">Female
</form>
·
Output:
The Submit Button
·
Penjelasan:
Di gunakan untuk menghandle nama atau
apapun didalam kolom.
·
Script:
<form
action="http://www.w3schools.com/html/action_page.php">
First
name:<br>
<input
type="text" name="firstname" value="Mickey">
<br>
Last
name:<br>
<input
type="text" name="lastname" value="Mouse">
<br><br>
<input
type="submit" value="Submit">
</form>
·
Output:
Grouping Form Data with
<fieldset>
·
Penjelasan:
Di gunakan untuk menggolongkan sebuah
form menjadi satu grup.
·
Script:
<form
action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First
name:<br>
<input
type="text" name="firstname" value="Mickey">
<br>
Last
name:<br>
<input
type="text" name="lastname" value="Mouse">
<br><br>
<input
type="submit" value="Submit">
</fieldset>
</form>
·
Output:
2. HTML
Form Elements
The
<select>Element (Drop-Down List)
·
Penjelasan:
Untuk membuat List dalam bentuk
Drop-Down.
·
Srcipt:
<!DOCTYPE
html>
<html>
<body>
<form
action="action_page.php">
<select
name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
<br><br>
<input
type="submit">
</form>
</body>
</html>
·
Output:
The
<textarea>Element
·
Penjelasan:
Di gunakan untuk membuat suatu field
yang dapat digunakan untuk menulis text.
·
Script:
<form
action="action_page.php">
<textarea
name="message" rows="10" cols="30">
The
cat was playing in the garden.
</textarea>
<br><br>
<input
type="submit">
</form>
·
Output:
The<button>Element
·
Penjelasan:
Di gunakan untuk membuat tombol.
·
Script:
<button
type="button" onclick="alert('Hello World!')">Click
Me!</button>
·
Output:
HTML
5<datalist>Element
·
Penjelasan:
Untuk membuat data list dalam form.
·
Script:
<form
action="action_page.php">
<input
list="browsers" name="browser">
<datalist
id="browsers">
<option value="Internet
Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input
type="submit">
</form>
·
Output:
HTML
5<keygen>Element
·
Penjelasan:
Di gunakan untuk membuat keygen.
·
Script:
<form
action="action_page.php">
Username:
<br>
<input
type="text" name="user">
<br><br>
Encryption:
<br>
<keygen
name="security">
<br><br>
<input
type="submit">
</form>
·
Output:
HTML
5<output>Element
·
Penjelasan:
Di gunakan untuk penjumlahan.
·
Script:
<form
action="action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input
type="range" id="a" name="a"
value="50">
100
+
<input
type="number" id="b" name="b"
value="50">
=
<output
name="x" for="a b"></output>
<br><br>
<input
type="submit">
</form>
·
Output:
3. HTML
Input Types
Input Type: Password
·
Penjelasan:
Fungsinya sama seperti HTML Form, tetapi
disini terdapat form password.
·
Script:
<!DOCTYPE
html>
<html>
<body>
<form
action="#">
User
name:<br>
<input
type="text" name="userid">
<br>
User
password:<br>
<input
type="password" name="psw">
</form>
</body>
</html>
·
Output:
Input Type: checkbox
·
Penjalasan:
Di gunakan untuk membuat checkbox.
·
Script:
<form
action="action_page.php">
<input
type="checkbox" name="vehicle" value="Bike">I
have a bike
<br>
<input
type="checkbox" name="vehicle" value="Car">I
have a car
<br><br>
<input
type="submit">
</form>
·
Output:
Input Type: number
·
Penjelasan:
Berfungsi sama seperti datalist,
terdapat pilihan didalam form.
·
Script:
<form
action="http://www.w3schools.com/html/action_page.php">
Quantity (between 1 and 5):
<input type="number"
name="quantity" min="1" max="5">
<input type="submit">
</form>
·
Output:
Input Type: Date
·
Penjelasan:
Di gunakan untuk membuat form yang
berisi hari, bulan, tahun.
·
Script:
<form
action="action_page.php">
Birthday:
<input type="date"
name="bday">
<input type="submit">
</form>
·
Output:
Input Type: color
·
Penjelasan:
Di gunakan untuk membuat field yang
berisi warna.
·
Script:
<form
action="action_page.php">
Select your favorite color:
<input type="color" name="favcolor"
value="#ff0000">
<input type="submit">
</form>
·
Output:
Input Type: range
·
Penjelasan:
Di gunakan untuk membuat range.
·
Script:
<form
action="action_page.php" method="get">
Points:
<input type="range"
name="points" min="0" max="10">
<input type="submit">
</form>
·
Output:
Input Type: datetime
·
Penjelasan:
Untuk membuat form yang berisi tanggal,
waktu. Dan input type ini hanya bisa digunakan dengan browser opera, safari.
·
Script:
<form
action="action_page.php">
Birthday (date and time):
<input type="datetime"
name="bdaytime">
<input type="submit">
</form>
·
Output:
Input Type: email
·
Penjelasan:
Untuk membuat form berisi email.
·
Script:
<form
action="rakanurwahyudi@gmail.com/html/action_page.php">
E-mail:
<input type="email"
name="email">
<input type="submit">
</form>
·
Output:
Input Type: search
·
Penjelasan:
Di gunakan untuk membuat mesin
searching.
·
Script:
<form
action="rakanurwahyudi.blogspot.com/html/action_page.php">
Search Google:
<input type="search"
name="googlesearch">
<input type="submit">
</form>
·
Output:
Input Type: tel
·
Penjelasan:
Di gunakan untuk membuat form yang
berisi nomor telepon. Dan hanya bisa digunakan dibrowser safari.
·
Script:
<form
action="http://www.w3schools.com/html/action_page.php">
Telephone:
<input type="tel"
name="usrtel">
<input type="submit">
</form>
·
Output:
Input Type: url
·
Penjelasan:
Di gunakan untuk membuat url.
·
Script:
<form
action="http://www.w3schools.com/html/action_page.php">
Add your homepage:
<input type="url"
name="homepage">
<input type="submit">
</form>
·
Output:
4. HTML
Input Attributes
The Value Attribute
·
Penjelasan:
Membuat form yang berisi nama dengan
value.
·
Script:
<!DOCTYPE
html>
<html>
<body>
<form
action="#">
First
name:<br>
<input
type="text" name="firstname" value="Raka">
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
</body>
</html>
·
Output:
The readonly Attribute
·
Penjelasan:
Sama seperti value attribute, namun text
didalam form cuman bisa dibaca.
·
Script:
<form
action="#">
First
name:<br>
<input
type="text" name="firstname" value ="raka"
readonly>
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
·
Output:
The disabled Attribute
·
Penjelasan:
Sama seperti readonly attribute, namun
form disabled.
·
Script:
<form
action="#">
First
name:<br>
<input
type="text" name="firstname" value ="raka"
disabled>
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
·
Output:
The Size Attribute
·
Penjelasan:
Untuk mengatur size form.
·
Script:
<form
action="#">
First
name:<br>
<input
type="text" name="firstname" value ="raka"
size="40">
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
·
Output:
The autofocus Attribute
·
Penjelasan:
Berfungsi untuk membuat setfocus pada
sebuah form.
·
Script:
<form
action="rakanurwahyudi.blogspot.com/html/action_page.php">
First name:<input type="text"
name="fname" autofocus><br>
Last name: <input type="text"
name="lname"><br>
<input type="submit">
</form>
·
Output:
The Formaction
Attribute
·
Penjelasan:
Di sini memiliki fungsi untuk membuat 2
submit.
·
Script:
<form
action="http://www.w3schools.com/html/action_page.php">
First name: <input type="text"
name="fname"><br>
Last name: <input type="text"
name="lname"><br>
<input type="submit"
value="Submit"><br>
<input type="submit"
formaction="demo_admin.asp" value="Submit as admin">
</form>
·
Output:
The multiple Attribute
·
Penjelasan:
Memiliki fungsi untuk memanggil type
file dan email.
·
Script:
<form
action="http://www.w3schools.com/html/action_page.php">
Select images: <input
type="file" name="img" multiple>
<input type="submit">
</form>
·
Output:
The Placeholder
Attribute
·
Penjelasan:
Di gunakan untuk membuat form, dengan
judul form berada didalam form.
·
Script:
<form
action="http://www.w3schools.com/html/action_page.php">
<input type="text"
name="fname" placeholder="First name"><br>
<input type="text"
name="lname" placeholder="Last name"><br>
<input type="submit"
value="Submit">
</form>
·
Output:
0 comments:
Post a Comment