Lecture 3 Introduction to HTML FORM AND CSS.pptx

Lecture 3 Introduction to HTML FORM AND CSS.pptx

• 1.
  Lecture 3: HTMLFORM AND CSS COURSE INSTRUCTOR: Akram Ali Omar Email: akram.ali.omar@gmail.com Mobile: +255778695626 The State University Of Zanzibar 1 DINF 0212 & DCS 0212: Interactive Website Development
• 2.
  HTML Forms • HTMLforms are used to select different kinds of user input • HTML forms are used to pass data to a server. • Every form in a document is contained in a FORM tag • The FORM tag specifies the action that takes place when the form is submitted 2 The State University Of Zanzibar
• 3.
  HTML Form Tags 3 TheState University Of Zanzibar Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control <select> Defines a drop-down list <datalist> Specifies a list of pre-defined options for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation <button> Defines a clickable button <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element
• 4.
  The FORM Tag •The <form> tag is used to create an HTML form for user input. • Important form attributes: 4 The State University Of Zanzibar Attribute Value Description action URL Specifies where to send the form-data when a form is submitted autocomplete on Specifies whether a form should have autocomplete on or off off enctype application/x-www-form- urlencoded-multipart/form- data text/plain Specifies how the form-data should be encoded when submitting it to the server (only for method="post") method get Specifies the HTTP method to use when sending form- data post name text Specifies the name of a form novalidate novalidate Specifies that the form should not be validated when submitted
• 5.
  Form tag -Example 5 The State University Of Zanzibar <form action = "form_handler.php" name = "myForm" autocomplete = "on" method = "post" novalidate> </form> • Forms should use METHOD="GET" when the form does not modify anything on the server:  A search engine query  A database search • Forms should use METHOD="POST" when the form changes the state of the server or sends a large amount of data  Entering a message on a forum  Uploading a file
• 6.
  The INPUT Tag •The INPUT tag is a multipurpose tag that creates many different types of controls • The type of input is controlled by the TYPE attribute 6 The State University Of Zanzibar Input type Description text Defines a single-line text field password Defines a password field (characters are masked) checkbox Defines a checkbox radio Defines a radio button email Defines a field for an e-mail address file Defines a file-select field and a "Browse..." button (for file uploads) hidden Defines a hidden input field date Defines a date control (year, month and day (no time)) number Defines a field for entering a number color Defines a color picker tel Defines a field for entering a telephone number
• 7.
  The INPUT Tag 7 TheState University Of Zanzibar Input type Description search Defines a text field for entering a search string range Defines a control for entering a number whose exact value is not important (like a slider control) time Defines a control for entering a time (no time zone) week Defines a week and year control (no time zone) month Defines a month and year control (no time zone) url Defines a field for entering a URL submit Defines a submit button image Defines an image as the submit button reset Defines a reset button (resets all form values to default values) button Defines a clickable button (mostly used with a JavaScript to activate a script) formaction Specifies where to send the form-data when a form is submitted. Only for type="submit" formmethod Specifies how to send the form-data (which HTTP method to use). Only for type="submit" formenctype Specifies how form-data should be encoded before sending it to a server. Only for type="submit"
• 8.
  FORM INPUT Tag-Example 8 The State University Of Zanzibar <form action="form_handler.php" method="post" autocomplete="off"> <p>Username: <input type="text" name="username" required></p> <p>Password: <input type="password" name="password" required></p> <p>Date of Birth: <input type="date" name="dob" required></p> <p>Age: <input type="number" name="age" required></p> <p>Email: <input type="email" name="email_address" required></p> <p><input type="checkbox" name="car" value="Car" required>I have Car <input type="checkbox" name="bike" value="Bike" required> I have a bike </p> <p><input type="radio" name="gender" value="Male" required>Male <input type="radio" name="gender" value="Female" required> I have a bike </p> <p>Profile Picture: <input type="file" name="picture" required></p> <p>Mobile Number: <input type="tel" name="phone" required></p> <p><input type="submit" name="save" value="SEND"><input type="reset" name="Clear"></p> </form>
• 9.
  HTML <datalist> Tag •An <input> element with pre-defined values in a <datalist>: 9 The State University Of Zanzibar <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
• 10.
  HTML <output> Tag •Perform a calculation and show the result in an <output> element 10 The State University Of Zanzibar <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a"> +<input type="number" id="b"> =<output name="x"></output> </form>
• 11.
  Hidden Control • <inputtype="hidden" ...> • Creates a control similar to a text control • User does not see control • User can not easily change the value • Useful for keeping track of data as the user traverses a collection of pages 11 The State University Of Zanzibar <input type="hidden" name="hiddendata" value="Hidden Data in Here"/>
• 12.
  Text Areas • TheTEXTAREA tag provides a multiline text entry area • The ROWS and COLS attributes are required and they specify the number of rows and number of columns 12 The State University Of Zanzibar <textarea rows="30" cols="50" name="bigtext"> The preformatted initial text is sandwiched Within the tag. </textarea>
• 13.
  Menus • Drop-down menusare created using the SELECT tag • Attribute SIZE determines how many rows to display at once • Each option is enclosed in an OPTION tag 13 The State University Of Zanzibar <select name="country" size="5"> <option value="AB">Abkhazia</option> <option value="ZB">Zimbabwe</option> </select>
• 14.
  Menus (Cont'd) • TheMULTIPLE attribute of the SELECT tag • Creates menus that allow multiple selections Options can be grouped hierarchically using the OPTGROUP tag • The <optgroup> tag is used to group together related options in a select list. The State University Of Zanzibar 14 <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
• 15.
  Labels • The LABELtag specifies that the enclosed item is a label for the named form element • For example, clicking the label will shift the focus or change the state of the associated form element The State University Of Zanzibar 15 Check all that apply<br> <input type="checkbox" name="doglover" id="dogs" checked> <label for="dogs">I like dogs</label><br> <input type="checkbox" name="catlover" id="cats"> <label for="cats">I like cats</label><br> <input type="checkbox" name="piglover" id="pigs"> <label for="pigs">I like pigs</label>
• 16.
  Fieldsets • The FIELDSETtag is used to group together a set of related form elements • The LEGEND tag assigns a caption to a field set The State University Of Zanzibar 16 <fieldset> <legend>Personal Information</legend> First Name: <input type="text" name="fn" size="20"> <br> Last Name: <input type="text" name="ln" size="20"> <br> Date of Birth: <input type="text" name="dob" size="10"> </fieldset>
• 17.
  CSS FORMS • PLEASEVISIT THIS LINK TO STYLE HTML FORM WITH CSS • https://www.w3schools.com/css/css_form.asp The State University Of Zanzibar 17
• 18.
  CSS FORMS Styling InputFields If you only want to style a specific input type, you can use attribute selectors: input[type=text] - will only select text fields input[type=password] - will only select password fields input[type=number] - will only select number fields The State University Of Zanzibar 18 input { width: 100%; } input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }
• 19.
  CSS FORMS • FocusedInputs • Use the :focus selector to do something with the input field when it gets focus: • Styling Input Buttons The State University Of Zanzibar 19 input[type=text]:focus { background-color: lightblue; } input[type=button], input[type=submit], input[type=reset] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; }
• 20.
  The State UniversityOf Zanzibar 20