Loading...
Wednesday 8 April 2020
Home » form action attribute » form method attribute » get put post delete methods » html forms » HTML 5 forms tutorial in urdu hindi part 8

HTML 5 forms tutorial in urdu hindi part 8

HTML Forms

Introduction

HTML form is way to take input from user, <form> tag is used to create forms in HTML. Examples of forms in websites are login form or sign in ofrm, user registration or sign up form, complaint form, Admission forms, jobs application form, subscription form, contact us form, inquiry form etc. Following is the syntax to create form in HTML.

<form method="type" action="url>


    form content and elements


</form>

Form method attribute

The method is one of the most important attribute of form tag, it is used to specify method of processing form. The get and post are widely used form methods and delete and put are rarely used form methods.
Get: Get is the default form method, means if we don't write method in form , it has get method by default. Get is used to submit small amount of data, the data which is submitted with get is displayed in URL as query strings, hence it is not secure way of submitting form data and is not used for sensitive data such as pins , passwords , credit card numbers etc. because information is visible in URL and can be bookmarked.  Get submit less amount of data then post.  Get is used when you want to pass some values from one page to an other page.
Post: Post is used to submit form data, it takes larger amount of data , the data which is submitted will not be shown in url hence it is secure and can not be book marked. Post is used always when submitted form data to server.
Put: It is used to update records.
Delete:It is used to delete records

Form Action Attribute

The action attribute is used to specify a URL which process the form. URL is of Server Side Language page which process the form and takes data and saves to database. The examples of Server Side Languages are PHP (Hyper text pro processor), JSP (Java Server Pages), ASP (Active Server Pages), CGI (Common Gateway Interface), PERL and so on.

Form elements

  1. <form>
  2. <input>
  3. <label>
  4. <select>
  5. <option>
  6. <optgroup>
  7. <datalist>
  8. <fieldset>
  9. <legend>
  10. <output>
  11. <button>
  12. <meter>
  13. <progress>
  14. <textarea>

<input> element

This element is used to create form input fields, like text field, password field, email field, url field and son. 
Important Attributes of <input> element
  1. type
  2. name
  3. id
  4. required 
  5. align
  6. checked
  7. alt
  8. disabled 
  9. form
  10. formaction
  11. width
  12. height
  13. list
  14. min
  15. max
  16. maxlength
  17. multiple
  18. placeholder
  19. required 

Form input type attribute values

Attributes with (*) are new in HTML 5
  1. text
  2. email  *
  3. password
  4. url  *
  5. submit
  6. reset
  7. button
  8. image
  9. radio
  10. checkbox
  11. file
  12. color  *
  13. date  *
  14. datetime  *
  15. datetime-local  *
  16. month  *
  17. week  *
  18. time  *
  19. tel  *
  20. search  *
  21. number  *
  22. range  *
  23. hidden
form input types example
<!doctype html>
<html>
<head>
<title>Form Input Types </title>
<meta charset="utf-8">
</head>
<body>
<form>
Text:<input type="text"> <br/> <!-- create text field !-->
Password:<input type="password"> <br/> <!-- create password field !-->
Email:<input type="email"> <br/> <!-- create email field !-->
Url:<input type="url"> <br/> <!-- create url field !-->
Tel:<input type="tel"> <br/> <!-- create telephone field !-->
Button:<input type="button" value="Button"> <br/> <!-- create button field !-->
Submit:<input type="submit"> <br/> <!-- create submit button !-->
Reset:<input type="reset"> <br/> <!-- create reset button !-->
Color:<input type="color"> <br/> <!-- create color picker !-->
Date:<input type="date"> <br/> <!-- create date field !-->
datetime:<input type="datetime"> <br/> <!-- create datetime field !-->
datetime-local:<input type="datetime-local"> <br/> <!-- create datetime-local field !-->
time:<input type="time"> <br/> <!-- create time input field !-->
week:<input type="week"> <br/> <!-- create week input field !-->
month:<input type="month"> <br/> <!-- create month input field !-->
image:<input type="image" src="url"> <br/> <!-- create image button !-->
file:<input type="file"> <br/> <!-- create file upload field !-->
number:<input type="number"> <br/> <!-- create number input field !-->
range:<input type="range"> <br/> <!-- create range input field !-->
hidden:<input type="hidden"> <br/> <!-- create hidden field !-->
search:<input type="search"> <br/> <!-- create search field !-->
radio:<input type="radio"> <br/> <!-- create radio button !-->
checkbox:<input type="checkbox"> <br/> <!-- create check box !-->
</form>

</body>

</html>

Simple login form example in HTML 5 

<!doctype html>
<html>
<head>
<title>Simple Login Form Example in HTML 5</title>
<meta charset="utf-8">
</head>
<body>

<table bgcolor="#446804" align="center">
<tr>
<th><h2>Login Form</h2></th>
</tr>
<form>
<tr>
<td>Email</td>
<td><input type="email"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit"></td>
</tr>

</form>
</table>

</body>
</html>

Simple sign up / registration form in HTML 5 

<!doctype html>
<html>
<head>
<title>Simple Login Form Example in HTML 5</title>
<meta charset="utf-8">
</head>
<body>
<h2 align="center">Sign up form in HTML 5 </h2>
<table bgcolor="lightgray" align="center" cellpadding="0" cellspacing="0">
<form>
<tr>
<td><label for="fname">First Name</label></td>
<td><input type="text" id="fname" name="fname"></td>
</tr>
<tr>
<td><label for="lname">Last Name</label></td>
<td><input type="text" id="lname" name="lname"></td>
</tr>
<tr>
<td><label for="gender">Gender</label></td>
<td>
<input type="radio" id="gender" name="gender" value="Male">Male
<input type="radio" id="gender" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td><label for="dob">Date Of Birth</label></td>
<td><input type="date" id="dob" name="dob"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td><label for="pass">Password</label></td>
<td><input type="password" id="pass" name="pass"></td>
</tr>
<tr>
<td><label for="cpass">Confirm Password</label></td>
<td><input type="password" id="cpass" name="cpass"></td>
</tr>
<tr>
<td colspan="2" align="center"><br /><input type="submit"></td>
</tr>
</form>
</table>
</body>
</html>

Checkout Billing information form 

<!doctype html>
<html>
<head>
<title>Simple Login Form Example in HTML 5</title>
<meta charset="utf-8">
</head>
<body>
<h2 align="center">Billing Information </h2>
<table bgcolor="lightgray" align="center" cellpadding="0" cellspacing="0">
<form>
<tr>
<td>First Name</td>
<td><input name="first_name" type="text" value="" placeholder="Katie" id="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td><input name="last_name" type="text" placeholder="King" value="" id="last_name" required></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="email" value="" id="email" required></td>
</tr>
<tr>
<td>Street Address</td>
<td><input name="address" placeholder="229 Broadway" type="text" value="" id="address" required></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input name="zip" type="text" value="" id="zip" required></td>
</tr>
<tr>
<td>City</td>
<td> <input name="city" type="text" placeholder="New York" value="" id="city" required></td>
</tr>
<tr>
<td>Country</td>
<td><select name="country" id="country" required>
                <option value="">Select Country</option>
                <option value="AR">Argentina</option>
                <option value="AU">Australia</option>
                <option value="AT">Austria</option>
                <option value="BY">Belarus</option>
                <option value="BE">Belgium</option>
                <option value="BA">Bosnia and Herzegovina</option>
                <option value="BR">Brazil</option>
                <option value="BG">Bulgaria</option>
                <option value="CA">Canada</option>
                <option value="CL">Chile</option>
                <option value="CN">China</option>
                <option value="CO">Colombia</option>
                <option value="CR">Costa Rica</option>
                <option value="HR">Croatia</option>
                <option value="CU">Cuba</option>
                <option value="CY">Cyprus</option>
                <option value="CZ">Czech Republic</option>
                <option value="DK">Denmark</option>
                <option value="DO">Dominican Republic</option>
                <option value="EG">Egypt</option>
                <option value="EE">Estonia</option>
                <option value="FI">Finland</option>
                <option value="FR">France</option>
                <option value="GE">Georgia</option>
                <option value="DE">Germany</option>
                <option value="GI">Gibraltar</option>
                <option value="GR">Greece</option>
                <option value="HK">Hong Kong S.A.R., China</option>
                <option value="HU">Hungary</option>
                <option value="IS">Iceland</option>
                <option value="IN">India</option>
                <option value="ID">Indonesia</option>
                <option value="IR">Iran</option>
                <option value="IQ">Iraq</option>
                <option value="IE">Ireland</option>
                <option value="IL">Israel</option>
                <option value="IT">Italy</option>
                <option value="JM">Jamaica</option>
                <option value="JP">Japan</option>
                <option value="KZ">Kazakhstan</option>
                <option value="KW">Kuwait</option>
                <option value="KG">Kyrgyzstan</option>
                <option value="LA">Laos</option>
                <option value="LV">Latvia</option>
                <option value="LB">Lebanon</option>
                <option value="LT">Lithuania</option>
                <option value="LU">Luxembourg</option>
                <option value="MK">Macedonia</option>
                <option value="MY">Malaysia</option>
                <option value="MT">Malta</option>
                <option value="MX">Mexico</option>
                <option value="MD">Moldova</option>
                <option value="MC">Monaco</option>
                <option value="ME">Montenegro</option>
                <option value="MA">Morocco</option>
                <option value="NL">Netherlands</option>
                <option value="NZ">New Zealand</option>
                <option value="NI">Nicaragua</option>
                <option value="KP">North Korea</option>
                <option value="NO">Norway</option>
                <option value="PK">Pakistan</option>
                <option value="PS">Palestinian Territory</option>
                <option value="PE">Peru</option>
                <option value="PH">Philippines</option>
                <option value="PL">Poland</option>
                <option value="PT">Portugal</option>
                <option value="PR">Puerto Rico</option>
                <option value="QA">Qatar</option>
                <option value="RO">Romania</option>
                <option value="RU">Russia</option>
                <option value="SA">Saudi Arabia</option>
                <option value="RS">Serbia</option>
                <option value="SG">Singapore</option>
                <option value="SK">Slovakia</option>
                <option value="SI">Slovenia</option>
                <option value="ZA">South Africa</option>
                <option value="KR">South Korea</option>
                <option value="ES">Spain</option>
                <option value="LK">Sri Lanka</option>
                <option value="SE">Sweden</option>
                <option value="CH">Switzerland</option>
                <option value="TW">Taiwan</option>
                <option value="TH">Thailand</option>
                <option value="TN">Tunisia</option>
                <option value="TR">Turkey</option>
                <option value="UA">Ukraine</option>
                <option value="AE">United Arab Emirates</option>
                <option value="GB">United Kingdom</option>
                <option value="US">USA</option>
                <option value="UZ">Uzbekistan</option>
                <option value="VN">Vietnam</option>
                </select></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone" type="text" value="" id="phone" required></td>
</tr>
<tr>
<td>Choose Payment Method</td>
<td><input type="radio" value="paypal" name="p_method">Paypal
<input type="radio" value="skrill" name="p_method">Skrill
<input type="radio" value="skrill" name="p_method">Easy Paisa
<input type="radio" value="skrill" name="p_method">Mobi Cash
</td>
</tr>
<tr>
<td colspan="2" align="center"><br /><input type="submit" value="Submit Order"></td>
</tr>
</form>
</table>
   

</body>
</html>

<Select> , <option>, <optgroup> elements

Select: used to create drop down menu , <option> elements creates options in menu and <optgroup> is used to group related options. 

Drop Down Menu:
<!doctype html>
<html>
<head>
<title>Drop Down Menu </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>Drop Down Menu Example 1</h2>
<select name="degree">
<option>select degree</option>
<option>BCS</option>
<option>BCIT</option>
<option>BSIT</option>
<option>BS SE</option>
<option>BBA</option>
<option>MBA</option>
<option>MPA</option>
<option>B.Com</option>
<option>M.Com</option>
<option>BA</option>
<option>Bsc</option>
</select>
</body>
</html>

List Box 
<!doctype html>
<html>
<head>
<title>List box with multiple attribute </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>Creating list box with multiple attribute </h2>
<select name="degree" multiple>
<option>select degree</option>
<option>BCS</option>
<option>BCIT</option>
<option>BSIT</option>
<option>BS SE</option>
<option>BBA</option>
<option>MBA</option>
<option>MPA</option>
<option>B.Com</option>
<option>M.Com</option>
<option>BA</option>
<option>Bsc</option>
</select>
</body>
</html>

List Box 2 
<!doctype html>
<html>
<head>
<title>List Box</title>
<meta charset=”utf-8”>
</head>
<body>
<h2>Creating box box in html 5 </h2>
<select name="degree" size="3">
<option>select degree</option>
<option>BCS</option>
<option>BCIT</option>
<option>BSIT</option>
<option>BS SE</option>
<option>BBA</option>
<option>MBA</option>
<option>MPA</option>
<option>B.Com</option>
<option>M.Com</option>
<option>BA</option>
<option>Bsc</option>
</select>
</body>
</html>
using <optgroup> in Drop Down 
<!doctype html>
<html>
<head>
<title>using optgroup in HTML 5 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>group related options with optgroup in HTML 5</h2>
<select name="degree">
<option>select degree</option>
<optgroup label="IT/CS">
<option>BCS</option>
<option>BCIT</option>
<option>BSIT</option>
<option>BS SE</option>
</optgroup>
<optgroup label="Business Adminstration">
<option>BBA</option>
<option>MBA</option>
<option>MPA</option>
<option>B.Com</option>
<option>M.Com</option>
</optgroup>
<optgroup label="Science and Arts">
<option>BA</option>
<option>Bsc</option>
</optgroup>
</select>
</body>
</html>
By - 11:12
Tags: , , ,
Share:

0 Comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
TOP