Web design - Working with forms in HTML

Web design - Working with forms in HTML

• 1.
  Fundamentals of Webdesigning Ministry of Higher Education Bamyan University Computer Science Department 1 Presented by : Mustafa Kamel Mohammadi Email : bamian.cs@gmail.com Working forms in HTML
• 2.
  learning objective  Inthis chapter you will learn  How to create forms in HTML 2
• 3.
  HTML forms  Formsare used frequently in many applications  Login  Adding records to system  ….  Form are consists of two parts  Form interface designed by HTML and CSS  Form action file that process form requests  Forms are created in HTML using <form> </form>  “action” attribute of <form> identifies the processing file by its URL  “method” attribute of <form> identifies the method of passing data from interface to processing file  Two methods are frequent in passing data “GET”, “POST” 3
• 4.
  HTML form passingdata  GET  Passes data to processing page by URL  Used when transferring small amount of data from interface to processing part  Used when needed to remember the browsing history  POST  Passes data to processing part by encapsulating data in a message package  Used for transferring large amount of data and so small  Data passed through POST method is not rememberable 4
• 5.
  From controls  formsare made of some form elements called form controls like  Text fields  Password fields  Checkboxes  Radio buttons  Lists or menus  Buttons  Almost all form controls has attribute “name” which contains the name of form control element set by us.  We use this “name” attribute to get the value of element in processing page. 5
• 6.
  Text fields  Usedto enter data like name, zipcode, numbers, ….  Can get single line numeric and text data  <input /> with “type” attribute set to “text” create text field  It has some attribute like  Size : determines the length of text box in character  Maxlenght : specifies the maximum characters that we can type in text field  Value : specifies the default value typed in text field <input type=“text” name=“first_name” size=“20” value=“type first name here” /> 6
• 7.
  Password field  Usedto enter password data into the text box  It shows the (* ) in place of character typed in box  <input /> with “type” attribute set to “password” create password field  It has the same attributes as “text field” like “size”, “maxlenght”  It has no security policy for encrypting data <input type=“password” name=“user_pass” size=“20” /> 7
• 8.
  Textarea  Is alarge , multiline, scrollable text box  <textarea> </textarea> creates a text are box, “name” attr is a must.  “cols” and “rows” attributes specifies the width a height of text box <textarea name=“comment” col=“20” rows=“40” > </textarea> 8
• 9.
  Check box  actas a multiple choice form input  <input /> with “type” attribute set to “checkbox” create chechbox  Because it allows multiple choice options so  Create all check boxes related to a single group with adding an attribute “name” to it.  Add “value” attribute to each of them and set the value.  If you want to set some options to be checked add attribute “Checked” with the value “checked” <input type=”checkbox” name=”fav_flavor” value=”chocolate” checked=”checked” /> 9
• 10.
  Radio buttons  asingle choice form input  <input /> with “type” attribute set to “radio” create radio buttons.  The same as checkboxes , but in a radio button group you can only choose one option rather than multiple options in check boxes  If you want to set one option to be checked add attribute “Checked” with the value “checked” <input type=”radio” name=”hand” value=”right” checked=”checked” /> 10
• 11.
  Selection menu  allowsuser to select one from multiple options through a menu  Creating menu is the same as lists but their tags differs  Each option has a vlue attribute , this is the value that is sent when form is submitted. <select name=“country”> <option value=“af”>Afghanistan</option> <option value=“ir”>Iran</option> <option value=“pk”>Pakistan</option> <option value=“us”>United states</option> </select> 11
• 12.
  Cont.  “size” attributeof <select> takes a numeric value, signifying the number of list options you want to make visible  To permit users to make multiple selections from the list, add a multiple attribute and set it equal to multiple.  To specify one option as preselected, define a selected attribute for the <option> tag and set it equal to selected. <select name=”pets” size=”4” multiple=”multiple”> <option value=”k9” selected=”selected”>Dogs</option> … </select> 12
• 13.
  File fields  HTMLallows you to select files from PC  <input /> with “type” attribute set to “file” create file fields  Set “name” attribute to specify uniquely a form control  To limit the type of files a visitor can upload, define an accept attribute and set it equal to the MIME type of the files you want to allow.  MIME stands for Multi-purpose Internet Mail Extensions <input type=”file” name=”profile_image” size=”20” maxlength=”50” accept=”image/gif”> 13
• 14.
  Submit or Resetform  Site visitors click buttons either to send the completed form to the server (the Submit button) or to clear the form if they’ve made a mistake (the Reset but-ton)  To create a Submit or reset button, insert an <input>tag add a “type” attribute and set it equal to submit or reset. <input type=”submit” value=”Submit” name=”submit” /> <input type=”reset” value=”Reset” name=”reset” /> 14
• 15.
  Hidden fields  HTMLprovides a mechanism by which you can include values in your form to be sent to the script that visitors never see. These values are defined using hidden fields.  Insert an <input>tag define a “type” attribute and set it equal to hidden  <input type=”hidden” name=”form_num” value=”C0003435” /> 15
• 16.
  16
• 17.
  References • “HTML 4dummies 5th edition” by Ed Tittel & Mary Burmeister • “HTML 5 designing rich internet applications” by Mathew Dawid • “HTML in ten simple steps” by Robert G. fuller 17