HTML FORMS

HTML FORMSBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.1Summary of the previous lectureBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.2Creating tables in HTMLTable attributesPage lay-out using tablesOutlineHTML FORMSHTML FORM elementsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.31. HTML FORMSForms 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 tasksBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.4This figure shows how a Web page form interacts with a CGI script. 1. HTML FORMSBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.51. HTML FORMS 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 tags A single page can include several different forms, but you cannot nest one form inside anotherBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.61. HTML FORMSCommon 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 formBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.72. Form ElementsTextbox Password FieldHidden FieldCheckboxRadio ButtonText AreaSelect ListSubmit ButtonReset ButtonBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.82.1 Text boxNAMESIZEVALUEMAXLENGTHBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.92.1 Text boxBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.10Start of the formlabelText box2.1 Text boxBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.11labelText boxvalue2.2 Password FieldNAMESIZEVALUEMAXLENGTHBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.122.2 Password FieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.13Type is password2.2 Password FieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.14Typed characters are hidden2.3 Hidden Text FieldNAMEVALUEBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.152.3 Hidden Text FieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.16Type is hidden2.3 Hidden Text FieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.17Hidden field is not visible2.4 CheckboxCHECKEDNAMEVALUEBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.182.4 CheckboxBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.19labeloptionTypecheckedvalue2.4 CheckboxBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.20labelOptionsAlready checked2.5 Radio ButtonsCHECKEDNAMEVALUEMALEFEMALEBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.212.5 Radio ButtonsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.22labelOptiontypeSame name2.5 Radio ButtonsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.23Radio ButtonAlready checked2.6 Select listDrop down list:Select Name, sizeOptionLAHOREKARACHISLAMABADBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.242.6 Select listBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.25List startsoptionsSelect ends2.6 Select listBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.26Select list with options2.7 Text areaText-areaRowsCols Name Default text Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.272.7 Text areaBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.282.7 Text areaBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.29Text area2.8 File fieldFile-fieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.302.8 File fieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.312.8 File fieldBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.322.9 Submit and Reset buttonsSubmit and Reset ButtonsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.332.9 Submit and Reset buttonsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.34Submit buttonReset button2.9 Submit and Reset buttonsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan.35SubmitResetSummaryBasharat 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