INPUT Element
INPUT is used in many different ways to
gather many different types of information.
In this case, two different types of INPUT: The
text and Submit types.
1.INPUT TEXT type:
Syntax:-
<INPUT type=”TEXT” name=”Name”>
- The INPUT text type is a standard, single-line text box.
- HTML forms use various types of user input fields, depending on the type attribute.
- An input element can be of the type text field, password field, checkbox, radio button, submit button, reset button, file select box, etc.
- All form controls need a name so that the processing script can access its content using the following syntax: -
Text Fields
- Text fields are one-line areas that allow the user to input text.
- Single-line text input controls are created using an <input> element, whose type attribute has a value of text.
<label
for="user-name">Username:</label>
<input
type="text" name="username" id="user-name">
Password Field
- Password fields are similar to text fields. The only difference is; that characters in a password field are masked, i.e. they are shown as asterisks or dots.
- This is to prevent someone else from reading the password on the screen.
- This is also a single-line text input controls created
using an
<input>element whosetypeattribute has a value ofpassword.
<label
for="user-pwd">Password:</label>
<input type="password" name="user-password"
id="user-pwd">
Textarea
- Text area is a multiple-line text input control that allows a user to enter more than one line of text
- Multi-line text input
controls are created using an
<textarea>element.
<label
for="address">Address:</label>
<textarea
rows="3" cols="30" name="address"
id="address"></textarea>
And here’s the INPUT submit type button is required:
<INPUT type=”SUBMIT” name=”SUBMIT”
value=”Submit”>
- The submit element displays a button that, when pressed, submits the form.
- The button text is set through the value attribute.
- As mentioned for the text INPUT, this form control
- needs a name for a processing reference.
================================================================
Processing the Form
In this topic take
a form ab.html and write the following code:-
A Simple HTML Form
<!DOCTYPE html>
<html>
<head>
<title>A simple HTML form</title>
</head>
<body>
<form method="post" action="abc.php" >
<p><label
for=”user”>Name:</label><br/>
<input type="text" id="user" name="user"></p>
<p><label
for=”message”>Message:</label><br/>
<textarea
id="message" name="message" rows=”5” cols=”40”></textarea></p>
<button
type="submit" name="submit"
value="send">Send Message</button>
</form>
</body>
</html>
- Save this text file as ab.html and place that file in web server document root (ex. htdocs in xampp).
- This defines a form that contains a text field with the name “user”, a text area with the name “message” and a submit button.
- The FORM element’s ACTION argument points to a file called abc.php, which processes the form information.
- The method of this form is POST, so the variables are stored in the $_POST super global.
<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>
- Put these lines into a text file called abc.php and place that file in your web server document root.
- Now access the form itself (ab.html) with your web browser, and output is:-
- In PHP The $_POST global array contains all form data submitted with the POST method. The array index of the field is its name.
- See the next item for hints on checking the content of your $_POST array using the print_r() function.
<?php
echo “Hello “.$_POST[‘Name’];
?>
- In this example, $_POST[‘name’] displays the entered in the “Name” box.
- dumps the whole contents of the super global $_POST array to the output.
- The $_POST array, as with all arrays, has case-sensitive indexes.
Array
(
[Name] => test
[SUBMIT] => Submit
)
- When receiving the submitted form, PHP sets the POST array with the data that the form sends.
- Directly access any of the indexes by name. The Name index contains the value test.
==========================================================
0 Comments