HTML FORMS (Lecture 4)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.1Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.2Creating tables in HTMLTable attributesPage lay-out using tablesHTML FORMSHTML FORM elements
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.33Department of Computer Science, CIIT Islamabad.Forms provide a means of submitting information from the client to the serverHTML supports tags for creating forms, however, it does not process the informationUse server-side script to process form informationServer-side script runs on the Web server and receives data from a form and uses it to perform a set of tasks
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.4This figure shows how a Web page form interacts with a CGI script.
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.5 tag is used to start a form tag is used to end a formBetween and , form elements are placedWe can declare a form as:form elements and layout tagsA single page can include several different forms, but you cannot nest one form inside another
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.6Common Form Attributes:action - gives the URL of the application that is to receive and process the forms datamethod - sets the HTTP method that the browser uses to send the form's data to the server for processing; Either POST or GETname name of the form
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.7Textbox Password FieldHidden FieldCheckboxRadio ButtonText AreaSelect ListSubmit ButtonReset ButtonBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.8
NAMESIZEVALUEMAXLENGTH
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.9Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.10
Start of the formlabelText boxBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.11
labelText boxvalue
NAMESIZEVALUEMAXLENGTH
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.12Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.13
Type is passwordBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.14
Typed characters are hidden
NAMEVALUE
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.15Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.16
Type is hiddenBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.17
Hidden field is not visible
CHECKEDNAMEVALUE
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.18Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.19
labeloptionTypecheckedvalueBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.20
labelOptionsAlready checked
CHECKEDNAMEVALUEMALEFEMALE
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.21Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.22
labelOptiontypeSame nameBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.23
Radio ButtonAlready checkedDrop down list:Select Name, sizeOption
LAHOREKARACHISLAMABAD
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.24Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.25
List startsoptionsSelect endsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.26
Select list with optionsText-areaRowsCols Name Default text
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.27Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.28
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.29
Text areaFile-field
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.30Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.31
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.32
Submit and Reset Buttons
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.33Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.34
Submit buttonReset buttonBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.35
SubmitResetBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.36Creating forms in HTMLAdding form elementsChapter 5, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 37Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References
