Perform Calculations and Control Flow Telerik Software Academy Learning & Development Team.
Learning & Development Team Telerik Software Academy.
-
date post
23-Dec-2015 -
Category
Documents
-
view
223 -
download
0
Transcript of Learning & Development Team Telerik Software Academy.
![Page 1: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/1.jpg)
HTML Forms and Frames
Learning & Development Teamhttp://academy.telerik.com
Telerik Software Academy
![Page 2: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/2.jpg)
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
2
![Page 3: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/3.jpg)
Table of Contents HTML Frames
Frame and noframe tags iframe tag
3
![Page 4: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/4.jpg)
HTML FormsEntering User Data from a Web Page
![Page 5: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/5.jpg)
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 5
![Page 6: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/6.jpg)
How to Create a HTML Form?
Create a form block with
Example:
6
<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
The "method" attribute tells how the form data should be sent – via GET
or POST request
![Page 7: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/7.jpg)
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
7
<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" />
![Page 8: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/8.jpg)
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
8
<input type="reset" name="resetBtn" value="Reset the form" />
<input type="image" src="submit.gif" name="submitBtn" alt="Submit" />
<input type="button" value="click me" />
<input type="submit" value="Apply Now" />
![Page 9: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/9.jpg)
Checkboxes and Radio Buttons
Checkboxes:
Radio buttons:
Radio buttons can be grouped, allowing only one to be selected from a group:
9
<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" />
![Page 10: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/10.jpg)
Select Fields Dropdown menus:
Multiple-choice menus
10
<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>
![Page 11: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/11.jpg)
Hidden Fields
Hidden fields contain invisible data
Not shown to the user Used by JavaScript and server-side
code ViewState, SessionState in ASP.NET
11
<input type="hidden" name="Account" value="This is a hidden text field" />
![Page 12: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/12.jpg)
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
12
<label for="fn">First Name</label><input type="text" id="fn" />
![Page 13: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/13.jpg)
Fieldsets Fieldsets are used to enclose a group
of related form fields:
The <legend> is the fieldset's title13
<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>
![Page 14: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/14.jpg)
HTML FormsInputs Fields
Live Demo
14
![Page 15: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/15.jpg)
Sliders and SpinboxesLets Make It Spin
![Page 16: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/16.jpg)
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
Spinboxes do not work on Firefox Shown as regular textboxes
16
<input type="range" min="0" max="100" /><input type="number" min="0" max="100" />
![Page 17: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/17.jpg)
Sliders and Spinboxes
Live Demo
![Page 18: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/18.jpg)
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
18
<input type="text" name="firstName" autofocus="autofocus" />
![Page 19: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/19.jpg)
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
19
<input type="email" required="true" pattern="[^ @]*@[^ @].[^ @]"/>
<input type="url" required="true" />
<input type="tel" required="true" />
![Page 20: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/20.jpg)
HTML Forms Validation
Live Demo
20
![Page 21: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/21.jpg)
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
21
<input type="text" name="second" tabindex="10" /><input type="text" name="first" tabindex="5" />
![Page 22: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/22.jpg)
Tab IndexLive Demo
![Page 23: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/23.jpg)
HTML Frames<frameset>, <frame> and <iframe>
![Page 24: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/24.jpg)
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.
24
![Page 25: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/25.jpg)
HTML Frames – Demo
25
<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>
frames.ht
ml
Note the target attribute applied to the <a> elements in the left frame.
![Page 26: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/26.jpg)
Inline Frames: <iframe> Inline frames provide a way to show one website inside another website:
26
<iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe>
iframe-
demo.html
![Page 27: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/27.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
HTML Forms and Frames
http://academy.telerik.com
![Page 28: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/28.jpg)
Homework
1. Create a Web form that looks like this sample:
28
![Page 29: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/29.jpg)
Homework (2)
2. Create the following using tables and forms:
29
![Page 30: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/30.jpg)
Homework (3)3. Create the following HTML Page
Hint: Use Fieldsets and Nested tables
30
![Page 31: Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.us/reader035/viewer/2022081512/56649da65503460f94a915f5/html5/thumbnails/31.jpg)
Homework (4)4. *Construct the following Grid
component:
Try to make a HTML page, that looks just like the example
CSS is required 31