Form

http://www.w3schools.com/html/html_forms.
asp

Latihan membuat form endro wasito
FORM
HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons,
submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and
label elements.
The <form>tag is used to create an HTML form:
<form>
.
input elements
.
</form>

HTML Forms - The Input Element
The most important form element is the <input>element. The <input>element is used to
select user information. An <input>element can vary in many ways, depending on the type
attribute. An <input>element can be of type text field, checkbox, password, radio button,
submit button, and more.
The most common input types are described below.

Text Fields
<input type="text">defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

How the HTML code above looks in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
Password Field
<input type="password">defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
http://www.w3schools.com/html/html_forms.asp

Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female

Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select
ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I have a bike
I have a car

Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the
page specified in the form's action attribute. The file defined in the action
attribute usually does something with the received input:
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Username:
Submit

If you type some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called
"demo_form_action.asp". The page will show you the received input.

Radio buttons
How to create radio buttons.
<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="radio" name="sex" value="female">Female
</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and
all other radio-buttons with equal name become unchecked.</p>

</body>
</html>

Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.
<!DOCTYPE html>
<html>
<body>

<form action="">
</form>

</body>
</html>
More Examples


Simple drop-down list
How to create a simple drop-down list.
<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.
<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
Textarea
How to create a multi-line text input control. In a text-area the user can write an
unlimited number of characters.
<!DOCTYPE html>
<html>
<body>

<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

</body>
</html>

Create a button
How to create a button.
<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

Fieldset around form-data
How to create a border around elements in a form.
<!DOCTYPE html>
<html>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

Form with text fields and a submit button
How to create a form with two text fields and a submit button.
<!DOCTYPE html>
<html>
<body>

First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>


<p>If you click the "Submit" button, the form-data will be sent to a page called
"demo_form_action.asp".</p>

</body>
</html>
Form with checkboxes
How to create a form with two checkboxes and a submit button.
<!DOCTYPE html>
<html>
<body>

<br><br>
</form>


</body>
</html>
Form with radio buttons
How to create a form with two radio buttons, and a submit button.
<!DOCTYPE html>
<html>
<body>

<input type="radio" name="sex" value="female">Female<br>
</form>


</body>
</html>
Send e-mail from a form
How to send e-mail from a form.
<!DOCTYPE html>
<html>
<body>

<h2>Send e-mail to someone@example.com:</h2>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>

<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>

Gambar 1. Form dengan berbagai elemen input
1. Hidden

Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat
oleh browser
Name =nama dari variabel yang di kirim ke suatu alpilkasi
value =nilaidari variable

2. Date

Untuk menampilkan tanggal, bulan, tahun
3. Image Submit Button <input type=imagesrc=url>
Digunakan untuk menggantikan tombol standar submit dengan image
name =nama dari variabel yang di kirim ke suatu aplikasi

4. Select

Daftar isi dalam property selest menggunkan tag<option>
size =jumlah pilihan yang dapat di terima
name =nama dari variabel yang di kirim ke suatu aplikasi

Copy tag html berikut dan paste di notepad ++dan save dengan format form.html
<!DOCTYPE html>
<html>
<head>
<title>Form Input</title>
<link href="stylee.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var makes =new Array("BMW", "Ford", "Honda");
var models =new Array();
models["BMW"] =new Array("318", "525", "650", "X5");
models["Ford"] =new Array("Laser", "Eferest", "Fiesta");
models["Honda"] =new Array("J azz", "Civic", "Accord");
var tipes =new Array();
tipes["318"] =new Array("3181", "3182", "3183", "3184");
tipes["650"] =new Array("650A", "525B", "650C", "650D");
tipes["X5"] =new Array("X5A", "X5B", "X5C", "X5D");
tipes["J azz"] =new Array("IDSI", "VTECH", "AT-CVT", "Manual");
tipes["Civic"] =new Array("Grand", "V-Tech", "1/8-AT", "1/8-MT");
tipes["Laser"] =new Array("Manual", "DOHC", "SOHC");

function resetForm(theForm) {
/* reset makes */
theForm.makes.options[0] =new Option("-", "");
for (var i=0; i<makes.length; i++) {
theForm.makes.options[i+1] =new Option(makes[i], makes[i]);
}
theForm.makes.options[0].selected =true;
/* reset models */
theForm.models.options[0] =new Option("-", "");
theForm.models.options[0].selected =true;
theForm.tipes.options[0] =new Option("-", "");
theForm.tipes.options[0].selected =true;
}

function updateModels(theForm) {

var membuat =theForm.makes.options[theForm.makes.options.selectedIndex].value;
var baru =models[membuat];
theForm.models.options.length =0;
theForm.models.options[0] =new Option("-", "");
for (var i=0; i<baru.length; i++) {
theForm.models.options[i+1] =new Option(baru[i], baru[i]);
}
theForm.models.options[0].selected =true;
for (var i=0; i<newTipes.length; i++) {
theForm.tipes.options[i+1] =new Option(newTipes[i], newTipes[i]);
}
theForm.tipes.options[0].selected =true;
}

function updateTipes(theForm) {
var makee =theForm.models.options[theForm.models.options.selectedIndex].value;
var newTipes =tipes[makee];
theForm.tipes.options.length =0;
for (var i=0; i<newTipes.length; i++) {
theForm.tipes.options[i+1] =new Option(newTipes[i], newTipes[i]);
}

}

</script>
<style type="text/css">

#table1 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px double #00BFFF;
text-decoration:none;
background-color:azure;
}

#tampil_tabell {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-color:green;
}
</style>
</head>

<body background="hijau1.jpg">
<form name="autoSelectForm" action="tampil.php" method="GET">
<table id="table1" width="65%" align="center">
<tr>
<th scope="col">FORM INPUT DATA </th>
</tr>

<tr>
<td><table width="100%" class="table2">
<tr>
<td width="25%" id="text">NAMA</td>
<td width="5%" align="center"><b>:</b></td>
<td width="60%">
<input name="rad" type="text" size="50"
maxlength="10" />
</td>
</tr>
<tr>
<td width="25%" id="text">J ENIS KELAMIN</td>
<td align="center"><b>:</b></td>
<td>
<input type="radio" name="jk" value="Pria"/>Pria

<input type="radio" name="jk" value="Wanita"/>Wanita
</td>
</tr>
<tr>
<td width="25%" id="text">ASAL</td>
<td>
<select name="asal">
<option value="-">-</option>
<option value="Yogyakarta">Yogyakarta</option>
<option value="J akarta">J akarta</option>
<option value="J awa Timur">J awa Timur</option>
</select>
</td>
</tr>
<tr>
<td width="25%" id="text">Mobil</td><td align="center"><b>:</b></td>
<td><select size="1" name="makes" onchange="updateModels(this.form)"></select>
<select size="1" name="models" onchange="updateTipes(this.form)"></select>
<select size="1" name="tipes" ></select>
</td>
</tr>
<tr>
<td width="25%" id="text">NO TELP</td>
<td>
<input name="telp" type="text" id="telp" size="50" maxlength="13"/></td>
</tr>
<tr>
<td width="25%" id="text">ALAMAT EMAIL</td>
<td><input name="email" type="text" id="email" size="50" /></td>
</tr>
<tr>
<td width="25%" id="text">PASSWORD</td>

<td>
<input name="password" type="password" id="password" size="50"/></td>
</tr>
<tr>
<td width="25%" id="text">TANGGAL </td>
<td> <input type ='date' name ='tgl' size='50'>
</td>
</tr>
<tr><center></center>
<td width="25%" valign="top" id="text">HOBBY</td>
<td align="center" valign="top"><b>:</b></td>
<td>
<table width="100%" border="0">
<tr>
<td width="48%">
<input type="checkbox" name="hb1" value="Sepakbola"/>Sepakbola <br/>
<input type="checkbox" name="hb2" value="Futsal" />Futsal <br />
<input type="checkbox" name="hb3" value="Berenang" />Berenang
</td>
<td width="52%">
<input type="checkbox" name="hb4" value="Membaca" />Membaca <br />
<input type="checkbox" name="hb5" value="J ogging" />J ogging <br />
<input type="checkbox" name="hb6" value="taklim" />Taklim</td>
</tr>
</table>
</td></tr>
<tr>
<td width="25%" valign="top" id="text">DESKRIPSI DIRI</td>
<td align="center" valign="top"><b>:</b></td>
<td><textarea name="desk" cols="50" rows="4"></textarea></td>
</tr>
</table></td></tr>
<tr>
<td align="center">
<input type="submit" value="OK"/>
<input type="reset" value="Batal"/><font color="green">
<i>latihan form endro wasito</i> </font> </td>
</tr>
</table>
</form>
<script type="text/javascript">
resetForm(document.autoSelectForm);
</script>
</body>
</html>

Form

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Form

Загружено:

Авторское право:

Доступные форматы

http://www.w3schools.com/html/html_forms.

Вам также может понравиться