Professional Documents
Culture Documents
1. <html>
2. <head>
3. <title>A simple HTML form</title>
4. </head>
5. <body>
6. <form method=”post” action=”send_simpleform.php”>
7. <p><label for=”user”>Name:</label><br/>
8. <input type=”text” id=”user” name=”user”></p>
9. <p><label for=”message”>Message:</label><br/>
10. <textarea id=”message” name=”message” rows=”5”
cols=”40”></textarea></p>
11. <button type=”submit” name=”submit” value=”send”>Send
Message</button>
12. </form>
13. </body>
14. </html>
Put these lines into a text file called simpleform.html and place that file in your web
server document root. This listing defines a form that contains a text field with the
name “user” on line 8, a text area with the name “message” on line 10, and a submit
button on line 11. The FORM element’s ACTION argument points to a file called
send_simpleform.php, which processes the form information. The method of this form
is POST, so the variables are stored in the $_POST superglobal.
Now creates in the following code that receives user input and displays it within the
context of an HTML page.
<html>
<head>
<title>A simple response</title>
</head>
<body>
<p>Welcome, <strong><?php echo $_POST[‘user’]; ?></strong>!</p>
<p>Your message is:
<strong><?php echo $_POST[‘message’]; ?></strong></p>
</body>
</html>
In the above script called when the user submits the form created in Listing. Than it
accesses two variables: $_POST[‘user’] and $_POST[‘message’]. These are references to
the variables in the $_POST superglobal, which contain the values that the user entered
in the user text field and the message text area. Now you will see about as in the
following picture.
<body>
</form>
</body>
</html>
<?php
if(isset($_POST["txtUser"]) && !empty($_POST["txtUser"]))
{
echo "<p>Welcome <b>" . $_POST["txtUser"] . "</b>!</p>";
echo "<p>Your Product List are :</br>";
if(!empty($_POST["products"]))
{
echo "<ul>";
foreach ($_POST["products"] as $value)
{
echo "<li> $value </li>";
}
echo "</ul>";
}
?>
Output :
Text Fields
Single-line text input controls are created using an <input> element whose type attribute
has a value of text.
Eg: <form>
<input type="text" name="first_name" />
</form>
Pogram1:
<html>
<head>
</head>
</body>
<form >
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" />
</form>
</body>
</html>
Output is:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
The <INPUT> tag has some attributes like:
Password Field
This is also a form of single-line text input controls are created using an <input> element
whose type attribute has a value of password.
Eg: <input type="password" /> defines a password field:
Program2:
<html>
<head>
</head>
</body>
<form >
Login :
<input type="text" name="login" />
<br>
Password:
<input type="text" name="password" />
<input type="submit" value="submit" />
</form>
</body>
</html>
Output is:
Note: The characters in a password field are masked (shown as asterisks or circles).
Program3:
<html>
<head>
</head>
</body>
<form >
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>
Output is:
Radio Button:
Radio Buttons are used when only one option is required to be selected. They are created
using <input> tag as shown below:
Eg: <input type="radio" name="subject" value="maths" /> Maths
Program4:
<html>
<head>
</head>
</body>
<form>
<input type="radio" name="subject" value="maths" /> Maths
<input type="radio" name="subject" value="physics" /> Physics
<input type="submit" value="Select Subject" />
</form>
</body>
</html>
Note: checked: Indicates that this option should be selected by default when the page
loads.
Output is :
Checkboxes:
Checkboxes are used when more than one option is required to be selected. They are
created using <input> tag as shown below.
Eg: <input type="checkbox" name="maths" value="on"> Maths
Program5:
<html>
<head>
</head>
<body>
<form action="/cgi-bin/checkbox.cgi" method="get">
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
<input type="submit" value="Select Subject" />
</form>
</body>
</html>
Output is:
Buttons(Submit/Reset):
There are various ways in HTML to create clickable buttons. You can create clickable button
using <input> tag.
When you use the <input> element to create a button, the type of button you create is
specified using the type attribute. The type attribute can take the following values:
submit: This creates a button that automatically submits a form.
reset: This creates a button that automatically resets form controls to their initial
values.
button: This creates a button that is used to trigger a client-side script when the user
clicks that button.
Eg: <input type="reset" value="Reset" />
<input type="button" value="Button" />
Program6:
<html>
<head>
</head>
<body>
<form action="http://www.example.com/test.asp" method="get">
<input type="submit" name="Submit" value="Submit" />
<br /><br />
<input type="reset" value="Reset" />
<input type="button" value="Button" />
</form>
</body>
</html>
Output is:
Program7:
<html>
<head>
</head>
<body>
<form >
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Output is: