1 / 31

HTML Forms and Frames

HTML Forms and Frames. Telerik Software Academy. Learning & Development Team. http://academy.telerik.com. Table of Contents. HTML Forms Form Fields and Fieldsets Text Boxes Buttons Checkboxes and Radio Buttons Select Fields Hidden Fields Sliders and Spinboxes Validation Fields.

oceana
Download Presentation

HTML Forms and Frames

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Forms and Frames Telerik Software Academy Learning & Development Team http://academy.telerik.com

  2. Table of Contents • HTML Forms • Form Fields and Fieldsets • Text Boxes • Buttons • Checkboxes and Radio Buttons • Select Fields • Hidden Fields • Sliders and Spinboxes • Validation Fields

  3. Table of Contents • HTML Frames • Frame and noframetags • iframetag

  4. HTML Forms Entering User Data from a Web Page

  5. What are HTML Forms? • The primarymethod for gathering data from site visitors • HTML Forms can contain • Text fields for the user to type • Buttons for interactions like"Register", "Login", "Search" • Menus, Sliders, etc… • Check Google, Yahoo, Facebook • Google search field is a simple Text field

  6. How to Create a HTML Form? • Create a form block with • Example: The "method" attribute tells how the form data should be sent – via GET or POST request <form></form> <form name="myForm" method="post" action="path/to/some-script.php"> ... </form> The "action" attribute tells where the form data should be sent

  7. Text Fields • Single-line text input fields: • Multi-line text input fields (textarea): • Passwordinput – a text field which masks the entered text with *signs <input type="text" name="FirstName" value="This is a text field" /> <textarea name="Comments">This is a multi-line text field</textarea> <input type="password" name="pass" />

  8. Buttons • Reset button – brings the form to its initial state • Submit button: • Image button – acts like submit but image is displayed and click coordinates are sent • Ordinary button – no default action, used with JS <input type="reset" name="resetBtn" value="Reset the form" /> <input type="submit" value="Apply Now" /> <input type="image" src="submit.gif" name="submitBtn" alt="Submit" /> <input type="button" value="click me" />

  9. Checkboxes and Radio Buttons • Checkboxes: • Radio buttons: • Radio buttons can be grouped, allowing only one to be selected from a group: <input type="checkbox" name="fruit" value="apple" /> <input type="radio" name="title" value="Mr." /> <input type="radio" name="city" value="Lom" /> <input type="radio" name="city" value="Ruse" />

  10. Select Fields • Dropdown menus: • Multiple-choice menus <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> <select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> </select>

  11. Hidden Fields • Hidden fields contain invisible data • Not shown to the user • Used by JavaScript and server-side code • ViewState, SessionStatein ASP.NET <input type="hidden" name="Account" value="This is a hidden text field" />

  12. Labels • Labels are used to associate an explanatory text to a form field using the field's ID • Clicking on a label focuses its associated field • Checkboxes are toggled • Radio buttons are checked • Labels are • Both a usability and accessibility feature • Required in to pass accessibility validation <label for="fn">First Name</label> <input type="text" id="fn" />

  13. Fieldsets • Fieldsets are used to enclose a group of related form fields: • The <legend> is the fieldset's title <form method="post" action="form.aspx"> <fieldset> <legend>Client Details</legend> <input type="text" id="Name" /> <input type="text" id="Phone" /> </fieldset> <fieldset> <legend>Order Details</legend> <input type="text" id="Quantity" /> <textarea cols="40" rows="10" id="Remarks"></textarea> </fieldset> </form>

  14. HTML FormsInputs Fields Live Demo

  15. Sliders and Spinboxes Lets Make It Spin

  16. Range and Spinbox • Restricts users to enter only numbers • Additional attributes min, max and step and value • Can become Spinbox or Slider, depending on the input type • Have some differences on different browsers • Spinboxesdo not work on Firefox • Shown as regular textboxes <input type="range" min="0" max="100" /> <input type="number" min="0" max="100" />

  17. Sliders and Spinboxes Live Demo

  18. Field Attributes from HTML 5 • Autocomplete • The browser stores the previously typed values • Brings them back on a later visit • Autofocus • The field becomes on focus on page load • Required • The field is required to be filled/selected <input type="text" name="firstName" autofocus="autofocus" />

  19. Input Fields with Validation • Email – provides a simple validation for email • Can be passed a pattern for validation • In a mobile device brings the email keyboard • URL – has validation for url • In a mobile device brings the url keyboard • Telephone • Brings the numeric keyboard <input type="email" required="true" pattern="[^ @]*@[^ @].[^ @]"/> <input type="url" required="true" /> <input type="tel" required="true" />

  20. HTML Forms Validation Live Demo

  21. Tab Index • The tabindexHTML attribute controls the order in which form fields and hyperlinks are focused when repeatedly pressing the TAB key • tabindex="0" (zero) – "natural" order • If X < Y, then elements with tabindex="X" are iterated before elements with tabindex="Y" • Elements with negative tabindexare skipped, however, this is not defined in the standard <input type="text" name="second" tabindex="10" /> <input type="text" name="first" tabindex="5" />

  22. Tab Index Live Demo

  23. HTML Frames <frameset>, <frame> and <iframe>

  24. HTML Frames • Frames provide a way to show multiple HTML documents in a single Web page • The page can be split into separate views (frames) horizontally and vertically • Frames were popular in the early ages of HTML development, but now their usage is rejected • Frames are not supported by all user agents (browsers, search engines, etc.) • A <noframes> element is used to provide content for non-compatible agents.

  25. HTML Frames – Demo frames.html <html> <head><title>Frames Example</title></head> <frameset cols="180px,*,150px"> <frame src="left.html" /> <frame src="middle.html" /> <frame src="right.html" /> </frameset> </html> • Note the target attribute applied to the <a> elements in the left frame.

  26. Inline Frames: <iframe> • Inline frames provide a way to show one website inside another website: iframe-demo.html <iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe>

  27. HTML Forms and Frames http://academy.telerik.com

  28. Homework • Create a Web form that looks like this sample:

  29. Homework (2) • Create the following using tables and forms:

  30. Homework (3) • Create the following HTML Page • Hint: Use Fieldsetsand Nested tables

  31. Homework (4) • *Construct the following Grid component: • Try to make a HTML page, that looks just like the example • CSS is required

More Related