Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html form

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html form
Showing posts with label html form. Show all posts
Showing posts with label html form. Show all posts

HTML Tutorial Topic 4

HTML Tutorial Topic 4

html forms

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

Topics

  1. Form Elements select and Text Area
  2. Input Elements
  3. Input Elements Attributes
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.

List of Form Elements.

  1. <form>
  2. <select>
  3. <input>
  4. <textarea>
  5. <button>
  6. <option>
  7. <datalist>
  8. <optgroup>
  9. <button> 


<!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>

Result : 



html form

Simple Login Form Example

<!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>

Result

html login form

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.




  

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 

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

Simple All 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>

Result

form select

PHP Output

php request
 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>";

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 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

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 Example

<!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>

Result 
html input

html input color

html input date

Result Output in PHP

php request

 Input 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
I added a blog more about how to handle form data in server side using PHP
Check My Blog : -


Link :  PHP REQUEST and GET

 
0

Start Learning Html5 Semantics in an hour.


Learn HTML5 Semantics in An Hour.

Now what is semantics?


Html5 Comes in new data element which describe what type of content,section is for that element.like Header <header> Footer <footer>,sidebar <aside> etc.




A basic HTML5 Page Example.
===================================================


<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
This is the Header of our Site like for Site Title Menu
</header>
<nav>This is nav bar of our site</nav>
<aside>
This is sidebar of our site
</aside>
<section>
This is content of our site
</section>
<footer>
This is footer of our site
</footer>


</body>
</html>


This Simple page give output like this.






Since We look there is only plain text written on browser so as we all know tha html is only structure of page alignment designs and behaviour of our page control by javascript and css we will cover javascript and css in next post.


Now lets start Study more html general elements which we used and their property and default css value of their elements.


Before starting lets discuss about attribute what is attribute since every elements as has default attribute or we use custom attribute for js.


Anchor Tag (<a></a>)


<a> this is anchor tag which we used for linking our html page from one page to other
Attributes:
href : Url (e.g href=”http://google.com “ ,href=”page2.html”).
Rel : (nofollow,next,search,prev,tag,help,author) e.g rel=”nofollow” This used for nofollow the url generally used for search engines To Not follow this link.
Target : _blank - Open Link in New Tab.
_parent - Open Link in Same Window.
E.g <a href="hello.html">Link</a>


where hello.html is our next page and link is test which works as masking of link and href is a default attribute of anchor tag<a> .


Address Tag (<address></address>)
Address Tag Defines TheContact Information of an Article.The Text Inside Address Tag is Render in Italic Font.
E.g <address>Abc,New Delhi,India</address>


Area Tag (<area>)
Area tag Defines an Area in image mapping where we Create A image map i.e Clickable link in image by image area and coordinates .if you want More about image mapping and how to create it i already posted a article on this please read it.
E.g <img src=”hello.png” alt=”hello” usemap=”#hello”>
<map name=”hello”>
<area shape=”rect” coords=”0,0,82,120” href=”next.html”>
<area shape=”circle” coords=”120,58,8”’ href=”next2.html”>
</map>
Attributes :
Coords – This is coordinates of area of circle,rectangle of image.
Href- This is Link of url on click on image area.
Target- _blank,_parent.
Article Tag (<article></article>)
Article Tag defines the article in webpage such as post,comments.
E.g- <article>Again new post is Ready</article>


Audio Tag (<audio></audio>)
Audio tag Play the sound in webpage,such as music.
E.g - <audio controls=”controls”>
<source src=”hello.mp3” type=”audio/mp3”>
Your browser not supported
</audio>
if Your Browser not Support Audio tag it print the text “your browser not supported”.


Bold Text (<b></b>)


<b> this is for bold the text in our site.
E.g- <b>hello</b>

Body Tag (<body></body>)

<body> this is used for our body of site every contents of our site go inside body tag
E.g- <body>covers all</body>

  Break Tag(</br>)
<br> used for breaking the lines

Button Tag (<button></button>)
<button> create a button in our site
E.g <button>click</button>


Form Elements like (form,input,select,checkbox,radio,textarea)

lets read about input element select and textarea which used in submitting form.
we can create a form by using element <form>

e.g- <form action="hello.php" method="post">

</form>

here action is a
attribute for where we send the values of input fields and method is the method of sending data like get or post

if we use
get the then the value will show in our Url if we use post then value will be send hidden who carry value from one page to another all input field inside form will send the value by carrying value in its name attribute.
Note: - if we upload file using form then we must add extra attribute (enctype=”multipart/form-data”).

Input tag (<input>)
creates a input like radio,text,checkbox,file
<input type="text" name="hello"> (textbox)
<input type="radio" name="hello2"> (radio)
<input type="checkbox" name="hello3"> (checkbox)
<input type="submit" value="submit">(submit button)
<input type="reset" value="reset"> (reset input button>
<input type="file" name="file">(for file uploading)

Note :- using file uploading we must used enctype="multipart/form-data" attribute in our html form for sending the file data to server.


Select and option tag (<select></select>)
Select tag get value from its child tag option which we selected.


<select name="hello4">
<option>1</option>
<option>2</option>
</select>



div tag (<div></div>)
Div is a element for creating a small section in our site

Table,table row,table column(<table><table>,<tr><td>)
<table>
create a row column data in a table
<tr> this is table row 
<td> this is table column
<th>this is table heading

<table>
<tr><td>one</td><td>two</td></tr> 
<tr><td>three</td><td>four</td></tr> 
</table>

if we want two merge two column the simply use
attribute in td colspan=2
if we want to merge two row of a cell the simple use attribute in td rowspan=2

unordered list (ul),ordered list (ol),defination list(dl)

Unordered list
<ul>
<li>item1 </li>
<li>item2 </li>
<li>item3 </li>
<li>item4 </li>
</ul>

Ordered List
<ol>
<li>item1 </li>
<li>item2 </li>
<li>item3 </li>
<li>item4 </li>
</ol>


Defination list
<dl>
<li>item1 </li>
<li>item2 </li>
<li>item3 </li>
<li>item4 </li>
</dl>

image tag (<image>)
<img src="hello.jpg">
for displaying image in our site
where
src is the attribute for image path.
Alt attribute is used in image tag to display text if image will not loading .
Style Tag <style>

<style></style>
for css style of our page


Script Tag <script>

<script></script>
for script of our page like js.

<link>
for calling of external stylesheet in our page
<link rel="stylesheet" href="stylesheet.css">

for calling of external js
<script src="heelo.js"></script>


Paragraph tag <p></p>


<p> paragraph tag for certain paragraph in our site.


Title Tag <title>


<title>title tag of our site


Heading tag <hn- n=1,2,3,4,5,6>)

h1-h6 heading tag in our site.
<h1>.................</h1>
<h2>.................</h2>
<h3>.................</h3>
<h4>.................</h4>
<h5>.................</h5>
<h6>.................</h6>
Strong,Emphazise,Italic tag (<strong>,<em>,<i>)


Strong text - <strong>this is strong wriiten text</strong>
Emphazise - <em> this is em text</em>
Italic - <i>this is italic text</i>
Video tag <video>


<video controls=”controls” height=”100” width=”100”>
<source src=”hello.mp4” type=”video/mp4”>
Your Browser not Supported.
</video>
Video tag is used For adding video is our websites. If video tag not support your browser then it prints te text “your browser not support”.


Iframe <iframe>


iframe tag is used to load external webpage in our site.
Attribute
src=”hello.html”
E.g <iframe src=”hello.html” height=”100” width=”100”>



Thanks all This post Will be Update More Soon..




0