HTML 5 Simple Tutorial Part 4

HTML Tutorial Part 4
Welcome Again all,
Today I am Going To Start New Topic
Very Very Important as a Web Developer
For HTML which covers Forms.
Let sStart...’

Topic
● Form Elements select and Text Area
● Input Elements
● Input Elements Attributes

Form Elements
● Form elements are such element which we used for creating
our HTML form like Some Elements input box,dropdown
select,Buttons,Textarea.
• Input Box – For Simple input of data in any format.
• Select Dropdown – For Selecting Item in a list of items
• textarea – For Large Area of Input Contents ,Description
Message which is used to display our data in also multiline.
• Button – For Submit our Form or Simple Button For Any Events.

Form Elements
List of Form Elements.
● <form>
● <select>
● <input>
● <textarea>
● <button>
● <option
● <datalist>
● <optgroup>
● <button>

Form Elements
Simple Form Elements
<!DOCTYPE html>
<html>
<head>
<title>Form Elements</title>
</head>
<body>
Input Box <input type="text" name="text">
<br>
DropDown Select <select name="text">
<option>First</option>
<option>Second</option>
</select>
<br>
Text Area<textarea cols="50" rows="5">I m a text
area</textarea>
<br>
Button <button type="button"
name="button">Button</button>
</body>
</html>
Browser View

Form Elements
Simple Login Form
<!DOCTYPE html>
<html>
<head>
<title>Form Elements</title>
</head>
<body>
<form action="login.php" method="post">
Email<br> <input type="email" name="email"
placeholder="Email">
<br>
Password <br> <input type="password"
name="Password" placeholder="Password">
<br>
<button type="submit"
name="button">Login</button>
</form>
</body>
</html>
Browser View

Form Elements
Explaination
●
From line <form> - Here is form beginning form elements pass all data to new page on submitting.
Form elements pass only that data which is child element of form.
E.g <form>child Elements</form>
method= method is default get but we can use get or post.
When we use get our data pass through url which we see in url and post
pass data hidden.
action = action is our url for submitting data on that page like any server side page where it catch
that data.( which we see in php tutorial) for now we just pass and server side language catch it.
●
Other line after that are data elements which contain in its its variable and variable name is
name=”value” this value is the variable name which we catch in server side.
●
Submit = button submit is used to submit our its very important for submitting our forms.

Form Elements
Here is a list of Input Types Elements like radio,checkbox,button,date,select
select element and properties
select has a list of child elements which values we defined inside option element when we
submit the form the selected values pass through the form
<option>First</option> and <option value=”1”>First</option>
Here you two types of option i declare both is same but if we dont defined (set value=”value”)
then option text value will be passed else value attribute value pass.
● We can also make default selection of any element by using attribute
selected=”selected” in option element
● We can set the size of select box like display more than one value at a time by using.
size=”n” where n= no. Of elements to display

Form Elements
● We can also make multiple selection this time the value will pass
in array format.
By using multiple=”multiple” but for using mutiple we have to
change name in array for like my variable name is : -
name=”vegeable”
then i have to change it to
name=”vegetable[]”
if we don’t do that then we only get single selected value only

Form Elements
Select Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Select</title>
</head>
<body>
<form action="http://localhost/form.php">
<select name="fruit">
<option>Apple</option><option>Mango</option><option>Orange</option>
</select><br>
<select name="animal" size="4">
<option>Cat</option><option>Dog</option><option>Elephant</option><option>Horse</option><option>Zebra</option>
</select><br>
<select name="vegetable[]" size="4" multiple="multiple">
<option>Potato</option><option>Onion</option><option>Cabbage</option><option>Pea</option><option>Carrot</option>
</select><br>
<select name="defaultselected">
<option>Potato</option><option>Onion</option><option selected="selected">Cabbage</option><option>Pea</option> <option>Carrot</option>
</select><br>
<select name="differntvalue">
<option value="1">First</option><option value="2">Second</option><option value="3">Third</option><option value="4">Fourth</option>
<option value="5">Fifth</option>
</select><br>
<button type="submit" name="submit">Submit</button>
</form>
</body>
</html>

Form Elements
Browser View PHP OUTPUT I Know You all Excited To
Check This Form Data After
Seeing Output So Jst Use
this.
Note : -Make Sure You
Install Xampp Or Local
Server .
Code :
<?php
echo "<pre>";
print_r($_REQUEST);
echo "</pre>";

Form Elements
Textarea
● Text area is a large area for writing contents like post,message it is
multi line input area.
We can change its no. Of line to occcupied by using attribute
rows=”n” n= no. Of rows
We can change its no. Of column to occupied by using attribute
cols=”n” n= no. Of cols
● E.g : <textarea rows=”5” cols=”5”>I am textarea</textarea>

Input Elements
Input Elements
● Input Elements is a huge list of types that why am covering this on last topic.
● It contain datalist like auto complete data.
● It contain checkbox,Radio button
● It also contain 3 types of buttons also button,submit,reset
button – Normal Button
submit – Form Submit Button
reset – Reset The Form Data

Input Elements
List Of Types of all Inputs (type=”value” attrribute)
● type=”text” for text input
● type=”password” for password hidden values
● type=”submit” for submit values in forms
● type=”reset” for reseting values in form inputs
● type=”radio” for radio button option
● type=”checkbox” for multi check boxes (used name in array like name=”language[]”)
● type=”color” for color picker
● type=”date” for date selecting using calendar
● type=”email” for email input
● type=”number” for number input
● type=”time” for time input

Input Elements
<!DOCTYPE html>
<html>
<head>
<title>Input Elements</title>
</head>
<body>
<form action="http://localhost/form.php" method="post">
Plain Text Box <input type="text" name="name"><br>
Password Field <input type="password" name="password"><br>
Radio Button (Gender E.g):
<label>Male <input type="radio" name="gender" value="male"><label>Female <input type="radio" name="gender" value="female"></label><br>
CheckBox (Language E.g) :
<label>C++ <input type="checkbox" name="lang[]" value="c++"></label><label>PHP <input type="checkbox" name="lang[]" value="php"></label><br>
Color <input type="color" name="color"><br>
Date (E.g DoB) <input type="date" name="dob" ><br>
Email <input type="email" name="email"><br>
Number (E.g Age) : <input type="number" name="age"><br>
Time <input type="time" name="time" ><br>
<input type="submit" name="submit" value="submit"><input type="reset" name="reset" value="Reset Form Fields">
</form>
</body>
</html>

Input Elements
● Output using Same PHP file

Input Elements Attributes
Now We See Different Types Of Inputs Now lets see its Extra Attributes.
● value=”value” which set values in input fields.
● readonly=”readonly” which only reads values we can’t edit it.
● disabled=”disabled” disabled the input element then it will be not pass data to server.
● maxlength=”n” n= length of input field
● required=”required” used for validation without filling that field user can’t submit form.
● autofocus=”autofocus” which directly focus that field when page loads.
● placeholder=”transparent hint values” for display transparent hint values

Next Step
● I added a blog more about how to handle form data in server
side using PHP
● Check My Blog : -
http://sswebtricks.blogspot.in/2016/12/php-request-get-and-post-func
● Also Given My Link in Description.

HTML 5 Simple Tutorial Part 4

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie HTML 5 Simple Tutorial Part 4

Ähnlich wie HTML 5 Simple Tutorial Part 4 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML 5 Simple Tutorial Part 4