HTML Forms and Frames

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

Table of Contents
HTML Frames
Frame and noframe tags
iframe tag

HTML Forms
Entering User Data from a Web Page

What are HTML Forms?
The primary method 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

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

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

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
value="Reset the form" />
name="submitBtn" alt="Submit" />

Checkboxes and Radio Buttons
Checkboxes:
Radio buttons:
Radio buttons can be grouped, allowing only one to be selected from a group:

Select Fields
Dropdown menus:
Multiple-choice menus
selected="selected">Male
Female
Other
selected="selected">keyboard
mouse
Other

Hidden Fields
Hidden fields contain invisible data
Not shown to the user
Used by JavaScript and server-side code
ViewState, SessionState in ASP.NET
value="This is a hidden text field" />

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
First Name

Fieldsets
Fieldsets are used to enclose a group of related form fields:
The is the fieldset's title
Client Details
Order Details

IE8
Safari

HTML Forms
Inputs Fields
Live Demo

Sliders and Spinboxes
Live Demo

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
Sliders and Spinboxes do not work on Firefox
Shown as regular textboxes

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
autofocus="autofocus" />

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

Tab Index
Live Demo

Tab Index
The tabindex HTML 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 tabindex are skipped, however, this is not defined in the standard

HTML Frames
, and
<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="HTML Frames , and" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/892204/slide-21.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/892204/slide-21.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/892204/slide-21.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-21.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-21.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/892204/slide-22.jpg" target="_blank" rel="noopener">Слайд 23</a><h3 class="slides-content text-center font-bold"><div><p>HTML Frames<br><p>Frames provide a way to show multiple HTML documents in a</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="HTML Frames Frames provide a way to show multiple HTML documents in" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/892204/slide-22.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/892204/slide-22.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/892204/slide-22.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-22.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-22.jpg" class="slides-image"><!----><div class="slides-content">single Web page<br>The page can be split into separate views (frames) horizontally and vertically<br>Frames were popular in the early ages of HTML development, but now their usage is rejected<br>Frames are not supported by all user agents (browsers, search engines, etc.)<br>A <noframes> element is used to provide content for non-compatible agents.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/892204/slide-23.jpg" target="_blank" rel="noopener">Слайд 24</a><h3 class="slides-content text-center font-bold"><div><p>HTML Frames – Demo<br><p><html><br> <head><title>Frames Example</title></head><br> <frameset cols="180px,*,150px"><br> <frame src="left.html" /><br> <frame</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="HTML Frames – Demo Frames Example" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/892204/slide-23.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/892204/slide-23.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/892204/slide-23.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-23.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-23.jpg" class="slides-image"><!----><div class="slides-content">src="middle.html" /><br> <frame src="right.html" /><br> </frameset><br></html><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/892204/slide-24.jpg" target="_blank" rel="noopener">Слайд 25</a><h3 class="slides-content text-center font-bold"><div><p>HTML Forms and Frames<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="HTML Forms and Frames" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/892204/slide-24.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/892204/slide-24.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/892204/slide-24.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-24.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-24.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/892204/slide-25.jpg" target="_blank" rel="noopener">Слайд 26</a><h3 class="slides-content text-center font-bold"><div><p>Inline Frames: <iframe><br><p>Inline frames provide a way to show one website inside</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Inline Frames: Inline frames provide a way to show one website inside another website:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/892204/slide-25.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/892204/slide-25.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/892204/slide-25.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-25.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/892204/slide-25.jpg" class="slides-image"><!----><div class="slides-content">another website:<br><p><iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes">

Homework (1)
Create a Web form that looks like this sample:

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

Homework (3)
Construct the following Grid component:
Try to make a HTML page, that looks just like the example