A page can contain information that is static and those that are dynamic. Static means that the information presented tends to remain, if you want to change the information has to change its program. While that is dynamic, the information can be changed without having to change the program. To create a web that is dynamic, we need the existence of supporting components. The required supporting components may be text input and can also be the execution and usually presented in a form. To be able to use existing components on the form, it takes a special mastery of the relevant HTML code. In this chapter will be studied using the codes forming a form.
Basic Use of Forms
In a web page sometimes we come across a guest book for visitors, feedback and member registration. Among the three forms of the view must have used a form component. To form a necessary form tag pair <form> and </ form>. And use the support form the action attribute and method.
• ACTION is used to determine the destination if a button on a form is run ..
• METHOD used to determine the technical delivery of information after the run button to access or send an information. Generally the method consists of two types of get and post. When using get meaningful information displayed will be obtained on the page itself in this case the url in the action. While the post that information will be sent separately from the url.
For more details, use the action and the method can be seen on pieces of the following programs:
<Form action = "send.html" ">......</ form method = post>
A. Tag Input In Form
To input a data or text required a clear area. Area there are many different forms in the form of a field there is also a small box or circle a way to fill it simply by clicking on the area and there are still other forms. To shape it takes on the form tag and some attributes <input> supporters and to be located in pairs <form> tag and </ form>. Input tag has several attributes. Attributes as shown in the following table:
NAME = To determine the name of the data
SIZE = size Specifies the input box for text and password
MaxLength = Specifies the amount of text can be entered in a particular area such as the input text and password
VALUE = Provide initial values ??for the input box before starting the new text entered
CHECKED = Given that in a state of selected check boxes.
TYPE = Specifies the type of input box, such as passwords, text, submit, reset, etc.
The following example shows the use of a form that involves a text field, submit button and reset.
type the script below and save it as
form.html :
<html>
<head>
<title> form </ title>
</ Head>
<body>
<form ="information.html" action method = "post">
Name:
<input type = "text" name="nama" size = "20" MaxLength = "20">
<br>
Hobby:
<input type = "text" name ="hobby" size = "25" MaxLength = "40">
<br>
<input type = "submit" value = "Kirim">
<input type = "reset" value = "Clear">
</ Form>
</ Body>
</ Html>
then create a new file and save it as
information.html:
<html>
<head> <title> </ title>
</ Head>
<body>
Information you need is right here
</ Body>
</ Html>
To address that if the submit button is clicked then the HTML file named in the action attribute on the tag will be loaded <form> .. Once you learn PHP, ASP or other web database, you will know how to capture the values ??entered in the second text field above.
B. Determining Textarea
text area usually used for this type of input that a lot of character. Tag is used Couple <textarea> tag and </ textarea>. textarea can cover multiple lines. The attributes used in <textarea> tag can be seen in the following courses:
create a new file and save it as
textarea.html and type the script below:
<html>
<head>
<title> textarea </ title>
</ Head>
<body>
<form>
Note: <br>
<textarea name = "catatan" ="5" rows cols = "40"> </ textarea>
</ Form>
</ Body>
</ Html>
C. Select the Use of Form
To determine the choice by choosing its own against that shown on a particular list can be created by using a tag pair <select> and </ select>, another term is to select the combo box (drop down) or select list pilihan.contoh usage shown in the example following:
create a new file with the name
select.html, and then type the script below:
<html>
<head>
<title> textarea </ title>
</ Head>
<body>
<form>
Most food you like: <br>
<select name = "Makanan">
<option value = "Car"> Car </ option>
<option value = "Bikes "> Bikes </ option>
<option value = "scooter "> scooter </ option>
</ Select>
</ Form>
</ Body>
</ Html>
D. Usage Type Checkbox
Selecting an information by clicking on a particular box and then there are special characters that mark the box, on a form are called type checkbox. The characters are generally shaped a checklist / tick.
The following are examples of the use of type checkbox
create a new file and save it as
Checkbox.html, then type the script below:
<html>
<head>
<title> radio </ title>
<body>
<form>
Vegetable your passions: <br>
<input type = name = "bayam" checked> "checkbox" Spinach <br>
<input type = "checkbox" name = "kol"> Kol <br>
<input type = "checkbox" name = "Sawi"> mustard <br>
<input type = "checkbox" "lain" name => Other <br>
</ Form>
</ Body>
</ Html>
E. Usage Type Radio
Its use is generally the same type of radio to checkbox. Only if the checkbox is boxy and sign a character check, if the sphere-shaped radio with a marked character of black dots if we had chosen. Here is an example for the use of radio type:
create a new file and save it as
Radio.html, then type the script below:
<html>
<head>
<title> radio </ title>
</ Head>
<body>
<form>
Sex: <br>
<Input type = "radio"
Name = "sex" checked> men <br>
<Input type = "radio"
Name = "sex"> women <br>
<hr>
Religion: <br>
<Input type = "radio"
Name = "religion" value "i"> Islam <br>
<Input type = "radio"
Name = "religion" value "k"> Christian <br>
<Input type = "radio"
Name = "religion" value "t"> catholic <br>
<Input type = "radio"
Name = "religion" value "b"> budha <br>
<Input type = "radio"
Name = "religion" value "h"> hindu <br>
<Input type = "radio"
Name = "religion" value "l"> others <br>
</ Form>
</ Body>
</ Html>
F. Usage Type Password
Passwor is the password used to open or access any information. The password is generally a good character that the numbers and letters. How to enter the password normally have been provided a special area which was written and the characters do not look like the original word. characters that have been incorporated are generally interpreted in a certain code and a common form of the character "*". Here is an example HTML code:
create a new file and save it as
Password.html, then type the script below:
<html>
<head>
<title> password </ title>
<body>
<form>
User Name:
<input type = "text" "Nama" name = size = "20" MaxLength = "20">
<br>
Password:
<input type = "password" "kata_kunci" name = size = "8" MaxLength = "8">
<br>
<input type = "submit" value = "Kirim">
<input type = "reset" value = "Clear">
</ Form>
</ Body>
</ Html>
G. Button On Input Attributes
Button that we use in the examples above there are two, namely the submit and reset. By using <input> tag, you can form your own buttons with different functions with the two buttons that have used it. How to make is to give the value "button" on the attribute type. As seen in the following programs:
create a new file and save it as
Button.html, then type the script below:
<html>
<head>
<title> for the </ title>
</ Head>
<body>
<form> Click the button below: <br>
<input type = "button" value = "Kembali" onclick = "self.history.back();"> <br>
</ Form>
</ Body>
</ Html>
please try, and good luck.
Bact to Top
9:29:00 PM
Dwi
