1. HTML Forms Forms, Controls, Fields, Inputs, Submission, Validation SoftUni Team Technical Trainers Software University http://softuni.bg

2. 2 1.HTML Forms 2.Form Fields and Fieldsets 3.Text Boxes 4.Buttons 5.Checkboxes and Radio Buttons 6.Select Fields 7.Hidden Fields 8.Sliders and Spinboxes 9.Validation Fields Table of Contents

3. HTML Forms Entering User Data from a Web Page

4. 4  The primary method for gathering data from site visitors  HTML forms can hold  Text fields, drop-down lists, radio buttons, checkboxes, date / time fields, etc.  Buttons for interactions like [Register], [Login], [Search]  Sliders, range-selectors, date and time selectors, progress bars, etc… What are HTML Forms?

5. 5  Create a form block with the tag  Example: How to Create a HTML Form? <form></form> <!-- form fields <!-- form fields come here --> come here --></form> The " action " attribute tells where the form data should be sent The " method " attribute tells how the form data should be sent – via HTTP GET or POST request

6. 6  Single-line text input fields:  Multi-line text input fields (textarea):  Password input – a text field which masks the entered text with * signs Text Fields This is a multi-line text field This is a multi-line text field

7. 7  Reset button – resets the form fields to their initial state  Submit button – sends the form data to the server:  Image button – submit button with image  Static button – no default action, used with JavaScript Buttons Click Me Click Me

8. 8  Checkboxes:  Radio buttons in a group named " city ":  Only radio button from the group can be selected Checkboxes and Radio Buttons I agree I agree Sofia Sofia London London Munich Munich Madrid Madrid Rome Rome

9. 9  Drop-down list:  Multiple-select list Select / Option Fields Male Male Female Female Other Other mouse mouse sound speakers sound speakers keyboard keyboard

10. 10  Groups of Options Select / Optgroup Volvo Volvo Saab Saab Mercedes Mercedes Audi Audi

11. 11  Data List Data List

12. 12  Labels are associate an explanatory text to a form field  Labels are linked to fields through the field's ID  Clicking on a label focuses its associated field  Inputs take the cursor / checkboxes are toggled / radio buttons are checked  Labels are:  Both a usability and accessibility feature  Required in to pass accessibility validation Labels First Name First Name

13. 13  are used to enclose a group of related form fields:  The is the fieldset's title Fieldsets Customer Details Customer Details Order Details Order Details </form>

14. 14  Range / number inputs restricts users to enter only numbers  Additional attributes min, max, step and value  Can become spinbox or slider, depending on the input type  May be displayed differently on different browsers  May not work in some browsers (shown as normal text-boxes) Range and Spinbox

15. 15  Hidden fields contain invisible form data  Not shown to the user, but submitted with the form  Used by JavaScript and server-side code  Not encrypted  can be easily intercepted Hidden Fields

16. 16  Color picker  Date picker  Time picker  Date & time picker (combined) Other Input Types

17. 17  Month + year selection  Week of the year selection  File upload  Search box Other Input Types (2)

18. HTML Forms Inputs Fields Live Demo

19. 19  Autocomplete  Browser keeps the previously typed values  Readonly – the field value cannot be changed  Autofocus  The field becomes on focus on page load  Required  The field is required to be filled / selected Field Attributes for All Field Types

20. 20  Email – provides a simple validation for email  In a mobile device brings the email keyboard  URL – has validation for URL address  In a mobile browser brings the url keyboard  Telephone – has validation for phone numbers  Brings the numeric keyboard in mobile browsers Input Fields with Validation

21. 21  HTML input fields can use regular expression validators  Check the input values client-side, before the form submission  Server-side checks should be also performed for security reasons Regular Expressions Based Validation <input type="text" required="true" name="countryCode" title="Three letter country code" pattern="[A-Za-z]{3}" /> title="Three letter country code" pattern="[A-Za-z]{3}" />

22. HTML Forms Validation Live Demo

23. 23  The tabindex controls the order in which form fields and hyperlinks are focused when pressing the [TAB] key  Default: tabindex="0" (zero) – "natural" order  If X < Y, then elements with tabindex="X" are iterated before elements with tabindex="Y"  Elements with negative tabindex are skipped, however, this is not defined in the standard Tab Index

24. Tab Index Live Demo

25. Form Submission What Happens When We Submit a Form? GET vs. POST

26. 26  When a form is submitted:  The browser sends the form data to the server  The " action " attribute tells where to send the form  The " method " attribute tells how to send the form ( GET / POST )  GET sends the fields, encoded in the target URL:  All form fields are sent in format fieldname=fieldvalue  URL encoding is used to escape the special characters Form Submission http://www.mysite.com/?search=html&lang=en&location=US

27. 27  POST sends the fields in the HTTP request body: Form Submission (2) POST http://wordpress.com/wp-login.php HTTP/1.1 Host: wordpress.com … Content-Type: application/x-www-form- urlencoded login=nakov&pwd=parola123456&rememberm e=forever&wp- submit=Log+In&redirect_to=https%3A%2F% 2Fwordpress.com%2F&testcookie=1

28. 28  The form encryption type ( enctype )  Specifies how the browser encodes the form data Form Encryption Type (enctype) Content-Type: application/x-www-form-urlencoded application/x-www-form-urlencoded login=nakov&pwd=parola123456&remembe rme=forever&wp- submit=Log+In&redirect_to=https%3A%2 F%2Fwordpress.com%2F&testcookie=1 application/x-www-form-urlencoded mutlipart/form-data Content-Type: mutlipart/form-data ------WebKitFormBoundary8vsGdK01cCe1m0mC Content-Disposition: form-data; name="fileupload"; filename="logo.png" Content-Type: image/png …------WebKitFormBoundary8vsGdK01cCe1m0mC Content-Disposition: form-data; name="description" SoftUni Logo

29. 29  HTML Forms  Created by the tag + method ( GET / POST ) + action)  GET  data sent in the URL; POST  data send in the body  Forms can hold many controls  Text boxes, text area, buttons, lists, drop-downs, check-boxes, radio-buttons, labels, field sets  Date / time / color selectors / spin boxes  Forms support regex validation Summary

30. ? ? ? ? ? ? ? ? ? https://softuni.bg/courses/web-fundamentals/ HTML Forms

31. License  This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" licenseCreative Commons Attribution- NonCommercial-ShareAlike 4.0 International 31  Attribution: this work may contain portions from  "HTML Basics" course by Telerik Academy under CC-BY-NC-SA licenseHTML BasicsCC-BY-NC-SA  "CSS Styling" course by Telerik Academy under CC-BY-NC-SA licenseCSS StylingCC-BY-NC-SA

32. SoftUni Diamond Partners

33. Free Trainings @ Software University  Software University Foundation – softuni.orgsoftuni.org  Software University – High-Quality Education, Profession and Job for Software Developers  softuni.bg softuni.bg  Software University @ Facebook  facebook.com/SoftwareUniversity facebook.com/SoftwareUniversity  Software University @ YouTube  youtube.com/SoftwareUniversity youtube.com/SoftwareUniversity  Software University Forums – forum.softuni.bgforum.softuni.bg