itextsharp add annotation to existing pdf c# : Add links pdf document Library application class asp.net html wpf ajax 14816-part1763

CHAPTER 9
A Form of Madness
Diving In
Everybody  knows  about  web  forms,  right?  Make  a 
<form>
 add  a  few 
<input
type="text">
elements and maybe an 
<input type="password">
, finish it off with an
<input type="submit">
button, and you’re done.
You don’t know the half of it. HTML5 defines over a dozen new input types that you
can use in your forms. And when I say “use,” I mean you can use them right now—
without any shims, hacks, or workarounds. Now don’t get too excited; I don’t mean
to say that all of these exciting new features are actually supported in every browser.
Oh goodness no, I don’t mean that at all. In modern browsers, yes, your forms will kick
all kinds of ass. In legacy browsers, your forms will still work, but with less ass kicking.
Which is to say, all of these features degrade gracefully in every browser. Even IE 6.
Placeholder Text
The first improvement HTML5 brings to web forms is the ability to set placeholder text
in an input field. Placeholder text is displayed inside the input field as long as the field
is empty and not focused. As soon as you click on (or tab to) the input field, the
placeholder text disappears.
You’ve probably seen placeholder text before. For example, Mozilla Firefox 3.5 now
includes placeholder text in the location bar that reads “Search Bookmarks and His-
tory”, as shown in Figure 9-1.
Figure 9-1. Placeholder text in Firefox’s search box
147
Download from Library of Wow! eBook <www.wowebook.com>
Add links pdf document - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
add hyperlink pdf document; add hyperlinks to pdf online
Add links pdf document - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
pdf link to specific page; convert a word document to pdf with hyperlinks
When you click on (or  tab to) the location bar, the placeholder text disappears
(Figure 9-2).
Figure 9-2. Placeholder text disappears on focus
Ironically, Firefox 3.5 does not support adding placeholder text to your own web forms.
C’est la vie. Browser support for placeholders is shown in Table 9-1.
Table 9-1. Placeholder support
IE
Firefox
Safari
Chrome
Opera
iPhone
Android
3.7+
4.0+
4.0+
Here’s how you can include placeholder text in your own web forms:
<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>
Browsers that don’t support the 
placeholder
attribute will simply ignore it. No harm,
no foul.
Ask Professor Markup
Q: Can I use HTML markup in the 
placeholder
attribute? I want to insert an image, or
maybe change the colors.
A: The 
placeholder
attribute can only contain text, not HTML markup. However, there
are some vendor-specific CSS extensions that allow you to style the placeholder text in
some browsers.
Autofocus Fields
Many websites use JavaScript to focus the first input field of a web form automatically.
For example, the home page of Google.com will autofocus the input box so you can
type your search keywords without having to position the cursor in the search box.
While this is convenient for most people, it can be annoying for power users or people
with special needs. If you press the space bar expecting to scroll the page, the page will
not scroll because the focus is already in a form input field. Instead, you’ll type a space
in the field. If you focus a different input field while the page is still loading, the site’s
autofocus script may “helpfully” move the focus back to the original input field upon
completion, disrupting your flow and causing you to type in the wrong place.
148 | Chapter 9: A Form of Madness
Download from Library of Wow! eBook <www.wowebook.com>
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
converter toolkit SDK, preserves all the original anchors, links, bookmarks and Use C#.NET Demo Code to Convert PDF Document to HTML5 Add necessary references:
add link to pdf file; add hyperlink to pdf online
.NET PDF Document Viewing, Annotation, Conversion & Processing
edit, delete links. Form Process. Fill in form data programmatically. Read form data from PDF form file. Add, Update, Delete form fields programmatically. Document
adding an email link to a pdf; add hyperlink to pdf in preview
Because the autofocusing is done with JavaScript, it can be tricky to handle all of these
edge cases, and there is little recourse for people who don’t want a web page to “steal”
the focus.
To solve this problem, HTML5 introduces an 
autofocus
attribute on all web form con
trols. The 
autofocus
attribute does exactly what it says on the tin: as soon as the page
loads, it moves the input focus to a particular input field. But because it’s just markup
instead of script, the behavior will be consistent across all websites. Also, browser ven-
dors (or extension authors) can offer users a way to disable the autofocusing behavior.
Table 9-2 shows which browsers support autofocus.
Table 9-2. Autofocus support
IE
Firefox
Safari
Chrome
Opera
iPhone
Android
4.0+
3.0+
10.0+
Here’s how you can set a form field to autofocus:
<form>
<input name="q" autofocus>
<input type="submit" value="Search">
</form>
Browsers that don’t support the 
autofocus
attribute will simply ignore it.
What’s that? You say you want your autofocus fields to work in all browsers, not just
these fancy-pants HTML5 browsers? You can keep your current autofocus script. Just
make two small changes:
1. Add the 
autofocus
attribute to your HTML markup.
2. Detect whether the browser supports the 
autofocus
attribute (see “Form Autofo-
cus” on page 27), and run your own autofocus script only if the browser doesn’t
support autofocus natively:
<form name="f">
<input id="q" autofocus>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go">
</form>
...
Go to http://diveintohtml5.org/examples/input-autofocus-with-fallback.html to see an
example of 
autofocus
with fallback.
Autofocus Fields | 149
Download from Library of Wow! eBook <www.wowebook.com>
VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.
Turn PDF images to HTML images in VB.NET. Embed PDF hyperlinks to HTML links in VB.NET. Convert PDF to HTML in VB.NET Demo Code. Add necessary references:
add a link to a pdf in acrobat; add a link to a pdf in preview
How to C#: Basic SDK Concept of XDoc.PDF for .NET
You may add PDF document protection functionality into your C# program. to edit hyperlink of PDF document, including editing PDF url links and quick
c# read pdf from url; add hyperlink pdf
Professor Markup Says
Lots  of  web  pages  wait  until 
window.onload
fires  to  set  the  focus.  But  the
window.onload
event doesn’t fire until after all your images have loaded. If your page
has a lot of images, such a naive script could potentially re-focus the field after the user
has started interacting with another part of your page. (This is why power users hate
autofocus scripts.) The preceding example places the autofocus script immediately after
the form field that it references, but your backend systems may not be that flexible. If
you can’t insert a script in the middle of your page, you should set the focus during a
custom event like jQuery’s 
$(document).ready()
instead of 
window.onload
.
Email Addresses
For over a decade, web forms comprised just a few kinds of fields—the most common
are listed in Table 9-3.
Table 9-3. Input types in HTML 4
Field type
HTML code
Notes
Checkbox
<input type="checkbox">
Can be toggled on or off
Radio button
<input type="radio">
Can be grouped with other inputs
Password field
<input type="password">
Echoes dots instead of characters as the user types
Drop-down list
<select><option>...
File picker
<input type="file">
Pops up an “open file” dialog
Submit button
<input type="submit">
Plain text
<input type="text">
The 
type
attribute can be omitted
All of these input types still work in HTML5. If you’re “upgrading to HTML5” (perhaps
by changing your doctype; see “The Doctype” on page 31), you don’t need to make a
single change to your web forms. Hooray for backward compatibility!
However, HTML5 defines several new field types, and for reasons that will become
clear in a moment, there is no reason not to start using them.
The first of these new input types is for email addresses. It looks like this:
<form>
<input type="email">
<input type="submit" value="Go">
</form>
I was about to write a sentence that started with “In browsers that don’t support
type="email"
...,” but I stopped myself. Why? Because I’m not sure what it would mean
to  say  that  a  browser  doesn’t  support 
type="email"
 All  browsers  “support”
type="email"
. They may not do anything special with it (you’ll see a few examples of
150 | Chapter 9: A Form of Madness
Download from Library of Wow! eBook <www.wowebook.com>
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
the original text style (including font, size, color, links and boldness). C#.NET DLLs and Demo Code: Convert PDF to Word Document in C# Add necessary references
convert excel to pdf with hyperlinks; adding a link to a pdf
C# Create PDF Library SDK to convert PDF from other file formats
PDF with a blank page, bookmarks, links, signatures, etc. a PDF document in C#.NET using this PDF document creating toolkit, if you need to add some text
pdf link; adding hyperlinks to pdf
special treatment in a moment), but browsers that don’t recognize 
type="email"
will
treat it as 
type="text"
and render it as a plain text field.
I cannot emphasize enough how important this is. The Web has millions of forms that
ask you to enter an email address, and all of them use 
<input type="text">
. You see a
text box, you type your email address in the text box, and that’s that. Then along comes
HTML5, which defines 
type="email"
. Do browsers freak out? No. Every single browser
on Earth treats an unknown 
type
attribute as 
type="text"
—even IE 6. So you can “up-
grade” your web forms to use 
type="email"
right now.
What would it mean to say that a browser does support 
type="email"
? Well, it can mean
any number of things. The HTML5 specification doesn’t mandate any particular user
interface for the new input types. Opera styles the form field with a small email icon.
Other HTML5 browsers, like Safari and Chrome, simply render it as a text box—
exactly like 
type="text"
—so your users will never know the difference (unless they
view the page source).
And then there’s the iPhone.
The iPhone does not have a physical keyboard. All “typing” is done by tapping on an
onscreen keyboard that pops up at appropriate times, like when you focus a form field
in a web page. Apple did something very clever in the iPhone’s web browser: it recog-
nizes several of the new HTML5 input types, and dynamically changes the onscreen
keyboard to optimize for that kind of input.
For example, email addresses are text, right? Sure, but they’re a special kind of text.
That is, virtually all email addresses contain the 
@
sign and at least one period (
.
), but
they’re unlikely to contain any spaces. So when an iPhone user focuses on an 
<input
type="email">
element, she gets an onscreen keyboard that contains a smaller-than-
usual space bar, plus dedicated keys for the 
@
and 
.
characters, as shown in Figure 9-3.
To sum up: there’s no downside to converting all your email address form fields to
type="email"
immediately. Virtually no one will even notice, except iPhone users, who
probably won’t notice either. But the ones who do notice will smile quietly and thank
you for making their web experience just a little easier.
Web Addresses
Web addresses—known to many as URLs, and to a few pedants as URIs—are another
type of specialized text. The syntax of a web address is constrained by the relevant
Internet standards. If someone asks you to enter a web address into a form, he’ll be
expecting something like 
http://www.google.com
, not “125 Farwood Road.” Forward
slashes and periods are common, but spaces are forbidden. And every web address has
a domain suffix like “.com” or “.org”.
Behold...(drum  roll  please)...
<input  type="url">
 On  the  iPhone,  it  looks  like
Figure 9-4.
Web Addresses | 151
Download from Library of Wow! eBook <www.wowebook.com>
C# Image: Tutorial for Document Management Using C#.NET Imaging
detailed C# tutorials on each part by following the links respectively. are dedicated to provide powerful & profession imaging controls, PDF document, image to
add links in pdf; pdf link open in new window
VB.NET PDF: Basic SDK Concept of XDoc.PDF
You may add PDF document protection functionality into your VB.NET program. to edit hyperlink of PDF document, including editing PDF url links and quick
add links to pdf; pdf reader link
Figure 9-3. Keyboard optimized for entering an email address
Figure 9-4. Keyboard optimized for entering a URL
152 | Chapter 9: A Form of Madness
Download from Library of Wow! eBook <www.wowebook.com>
Just as it does for email address fields, the iPhone provides a special virtual keyboard
that’s optimized for web addresses. The space bar has been completely replaced with
three virtual keys: a period, a forward slash, and a “.com” button. You can long-press
the “.com” button to choose other common suffixes, like “.org” or “.net”.
Browsers that don’t support HTML5 will treat 
type="url"
exactly like 
type="text"
, so
there’s no downside to using it for all your web address–inputting needs.
Numbers As Spinboxes
Next up: numbers. Asking for a number is, in many ways, trickier than asking for an
email or web address. First of all, numbers are more complicated than you might think.
Quick: pick a number. –1? No, I meant a number between 1 and 10. 7½? No, no, not
a fraction, silly. π? Now you’re just being irrational.
My point is, you don’t often ask for “just a number.” It’s more likely that you’ll ask for
a number in a particular range, and you may only want certain kinds of numbers within
that range—maybe whole numbers but not fractions or decimals, or something more
esoteric like numbers divisible by 10. HTML5 has you covered. Let’s look at an
example:
<input type="number"
min="0"
max="10"
step="2"
value="6">
Let’s take that one attribute at a time (you can follow along with a live example if you
like):
type="number"
means that this is a number field.
min="0"
specifies the minimum acceptable value for this field.
max="10"
is the maximum acceptable value.
step="2"
, combined with the 
min
value, defines the acceptable numbers in the
range: 
0
2
4
, and so on, up to the 
max
value.
value="6"
is the default value. This should look familiar. It’s the same attribute
name you’ve always used to specify values for form fields. (I mention it here to
drive home the point that HTML5 builds on previous versions of HTML. You don’t
need to relearn how to do stuff you’re already doing.)
That’s the markup side of a number field. Keep in mind that all of those attributes are
optional. If you have a minimum but no maximum, you can specify a 
min
attribute but
no 
max
attribute. The default step value is 1, and you can omit the 
step
attribute unless
you need a different step value. If there’s no default value, the 
value
attribute can be
an empty string or even omitted altogether.
Numbers As Spinboxes | 153
Download from Library of Wow! eBook <www.wowebook.com>
But HTML5 doesn’t stop there. For the same low, low price of free, you get these handy
JavaScript methods as well:
input.stepUp(n)
Increases the field’s value by 
n
input.stepDown(n)
Decreases the field’s value by 
n
input.valueAsNumber
Returns the current value as a floating-point number (the 
input.value
property is
always a string)
Having trouble visualizing it? Well, the exact interface of a number control is up to
your browser, and different browser vendors have implemented support in different
ways. On the iPhone, where input is difficult to begin with, the browser once again
optimizes the virtual keyboard for numeric input as shown in Figure 9-5.
Figure 9-5. Keyboard optimized for entering a number
In the desktop version of Opera, the same 
type="number"
field is rendered as a “spinbox”
control,  with  little  up and down arrows  that  you can click to change the value
(Figure 9-6).
154 | Chapter 9: A Form of Madness
Download from Library of Wow! eBook <www.wowebook.com>
Figure 9-6. A spinbox
Opera respects the 
min
max
, and 
step
attributes, so you’ll always end up with an ac-
ceptable numeric value. If you bump up the value to the maximum, the up arrow in
the spinbox is grayed out (Figure 9-7).
Figure 9-7. A spinbox at its maximum value
As with all the other input types I’ve discussed in this chapter, browsers that don’t
support 
type="number"
will treat it as 
type="text"
. The default value will show up in
the field (since it’s stored in the 
value
attribute), but the other attributes, like 
min
and
max
, will be ignored. You’re free to implement them yourself, or you can reuse one of
the many JavaScript frameworks that have already implemented spinbox controls. Just
check for the native HTML5 support (see “Input Types” on page 25) first, like this:
if (!Modernizr.inputtypes.number) {
// no native support for type="number" fields
// maybe try Dojo or some other JavaScript framework
}
Numbers As Sliders
Spinboxes, discussed in the preceding section, are not the only way to represent nu-
meric input. You’ve probably also seen “slider” controls that look like Figure 9-8.
Figure 9-8. A slider
Numbers As Sliders | 155
Download from Library of Wow! eBook <www.wowebook.com>
You can now have slider controls in your web forms, too. The markup looks eerily
similar to that for spinbox controls:
<input type="range"
min="0"
max="10"
step="2"
value="6">
The available attributes are the same as those  for 
type="number"
min
max
step
,
value
—and they mean the same thing. The only difference is the user interface. Instead
of a field for typing, browsers are expected to render 
type="range"
as a slider control.
At the time of writing, the latest versions of Safari, Chrome, and Opera all do this.
(Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize its onscreen
keyboard for numeric input.) All other browsers simply treat the field as 
type="text"
,
so there’s no reason you can’t start using 
type="range"
immediately.
Date Pickers
HTML 4 did not include a date picker control. Various JavaScript frameworks have
picked up the slack—for example, DojojQuery UI, YUI, and Closure Library—but of
course each of these solutions requires “buying into” the framework on which the date
picker is built.
HTML5 finally defines a way to include a native date picker control without having
to script it yourself. In fact, it defines six: date, month, week, time, date + time, and
date + time – timezone.
So far, as Table 9-4 illustrates, support is...sparse.
Table 9-4. Date picker support
Input type
Opera Every other browser
type="date"
9.0+
type="month"
9.0+
type="week"
9.0+
type="time"
9.0+
type="datetime"
9.0+
type="datetime-local"
9.0+
Figure 9-9 shows how Opera renders an 
<input type="date">
.
If you need a time to go with that date, Opera also supports 
<input type="date
time">
, as shown in Figure 9-10.
If you only need a month and year (perhaps a credit card expiration date), Opera can
render an 
<input type="month">
, as shown in Figure 9-11.
156 | Chapter 9: A Form of Madness
Download from Library of Wow! eBook <www.wowebook.com>
Documents you may be interested
Documents you may be interested