![CSS FORMS
Styling Input Fields
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;
}](https://image.slidesharecdn.com/lecture3htmlformandcss-250330052200-70f7067b/85/Lecture-3-Introduction-to-HTML-FORM-AND-CSS-pptx-18-320.jpg)
![CSS FORMS
• Focused Inputs
• 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;
}](https://image.slidesharecdn.com/lecture3htmlformandcss-250330052200-70f7067b/85/Lecture-3-Introduction-to-HTML-FORM-AND-CSS-pptx-19-320.jpg)
Lecture 3 Introduction to HTML FORM AND CSS.pptx
- 1. Lecture 3: HTML FORM 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 • HTML forms 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 The State 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 The State 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 • <input type="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 • The TEXTAREA 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 menus are 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) • The MULTIPLE 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 LABEL tag 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 FIELDSET tag 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 • PLEASE VISIT 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 Input Fields 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 • Focused Inputs • 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 University Of Zanzibar 20