For the veterans of security establishment the bomb blasts have revived concerns about the critical nature of Hyderabad and surroundings in the growth of home-grown terrorism in India.

Officials point out that Hyderabad has been intricately linked to the growth of the present phase of domestic terrorism. When the first definite information about Muslim youth going to Pakistan for terror camps emerged more than a decade ago, with Hyderabad resident Shahid Bilal as a key figure, the government was alarmed at the highest levels. Once India confirmed that over 60 youth have gone across to Pakistan from Andhra Pradesh and Karnataka in 2005-06 the issue was taken up with Bangladeshi and Nepalese governments because most of them were going via either of these countries.

"Even if the bombers are from outside, they have received local logistical support," says one official. "There is a history here," he says about Hyderabad's brush with blasts as well as with fringe sympathisers.

A day before the twin blasts, the National Investigation Agency (NIA) had, in fact, filed its first chargesheet in the case of Bangalore-Hubli-Nanded terror module run from Saudi Arabia by LeT-HuJI handlers. One name among the 12 accused stood out: Obaidur Rehman. The 26-year-old Hyderabad resident is the nephew of Maulana Mohammed Naseeruddin, a radical preacher presently languishing in a Gujarat jail in connection with the murder of Gujarat home minister Haren Pandya.

The charge sheet also mentioned the man handling the group from Saudi Arabia as Farhatullah Ghori, maternal uncle of slain HuJI operative Shahid Bilal. Both belong to Hyderabad.

The blasts that followed the chargesheet have only come as a grim reminder of the Andhra Pradesh capital having become a favourite recruiting ground for terror groups. In fact, the city has been in terror crosshairs for close to a decade and a half providing strong base to both LeT and HuJI.



Accordig to intelligence agencies, Hyderabad first came on terror radar in late '90s with several radical religious organizations becoming a springboard to youth taking to terror. While there was an entrenched sense of victimhood and injustice post Babri masjid demolition among Muslims in the state, their anger was first organized and harnessed by Mohammed Abdul Shahid alias Shahid Bilal under aegis of HuJI.

The first effects of this endeavor manifested itself in the terror attack on the office of Hyderabad Special Task Force in 2003. Bilal's maternal uncle Farhatullah Ghori's name prominently cropped up in the investigations. He was also a suspect in the Akshardham Temple attack in Gujarat in 2002.

Following this, Bilal was found to be instrumental in conducting several blasts across south India between 2004 and 2007. During this period he also helped 26/11 accused and LeT operative Zabiuddin Ansari alias Abu Jundal escape to Pakistan via Bangladesh along with his associate Fayyaz Kagzi after the 2006 Aurangabad arms haul in Maharashtra. In October 2007, Bilal was himself killed in Karachi along with his brother Samad. However, sources say, he has five more brothers who are in Pakistan and elsewhere. And the network he has left behind across India, Pakistan and Saudi Arabia keeps recruiting people for Jihadi activities.

In 2008, Maulana Naseeruddin's son, Riyazuddin Nasir, was arrested in Dharwad, Karnataka for planning to carry out terror strikes in the state. In 2012, with Obaidur Rehman's arrest in the Bangalore terror module, the city again struggled to shake off the terror tag.

Forms on the web. They are literally everywhere, and there seem to really be all kind of flavors for them. From day one they have been a great mean for users to input data and information and interact with various services. And what comes with that is every implementation under the sun to offer validation for them, custom display and functionality if they aren’t native in that specific web browser, and much much more. Therefore, during the development phase of HTML5, one of the important things that have been looked into is making forms on the web evolve into what both end users and developers need to make things easier. Why would every web developer have to invent the wheel again or include tons of JavaScript code just to make something very basic like a datepicker work?

Let’s leave that behind us and explore all the new additions to forms in HTML5!

There are basically five areas of improvements when it comes to form features in HTML5:

• New input types
• New attributes
• New elements
• Validation
• APIs, such as the File API

In this article I will cover the first three of them and what it means for you as web developer. I plan to follow up with another article on how to script forms with the new options we have, and cover validation and chosen APIs.

New Input Types

These are the new input types in HTML5. Some of them are directly connected to be displayed in a certain way in the web browser, where others are more there for semantic value and/or connected to validation of them. The great thing about input types too is that if it’s not supported in the web browser, it will default back to a regular <input type=”text”> element: no errors, no multiple code versions to handle.

Here are the new input types:

color

Gives the end user a native color picker to choose a color.

date

Offers a datepicker.

datetime

An element to choose both date and time.

datetime-local

An element to choose both date and time, with local settings support.

email

A field for entering e-mail address(es).

month

Choose a full month.

number

Picking a number.

range

Offers a slider to set to a certain value/position.

search

A field for search queries.

tel

Choosing a telephone number.

time

Input a certain time.

url

Entering a URL.

week

Picking a specific week.

Examples

Examples of these new input types, with sample or expected value (or read out value after form submission) set in their respective value attribute:

1.<input type="color" value="#b97a57">

1.<input type="date" value="2011-06-08">

1.<input type="datetime" value="2011-06-09T20:35:34.32">

1.<input type="datetime-local" value="2011-06-09T22:41">

1.<input type="email" value="robert@robertnyman.com">

1.<input type="month" value="2011-06">

1.<input type="number" value="4">

1.<input type="range" value="15">

2.<!-- Note: If not set, default attribute values are min="0", max="100", step="1". -->

1.<input type="search" value="[Any search text]">

2.<!-- Note: In WebKit-based web browsers (Google Chrome, Safari) you can add the non-standard results attribute to get a looking glass icon to click to see the latest searches, and the attribute autosave to keep them across page loads. -->

1.<input type="tel" value="[Any numeric value]">

2.<!-- Note: Most web browsers seem to let through any value at this time. -->

1.<input type="time" value="22:38">

1.<input type="url" value="http://robertnyman.com">

2.<!-- Note: requires a protocol like http://, ftp:// etc in the beginning. -->

1.<input type="week" value="2011-W24">

Demo Page

You can see all of these new input types in action with their code listed below at HTML5 Forms input types demo.

New Attributes

To complement the new input types, there are a number of new attributes for actions web developers often need:

autocomplete

An option to turn off automatic form completion of values for a field. Possible values are “on” and “off”.

autofocus

Whether focus should be set to this field as soon as it has loaded.

formaction

For buttons that submit a form (e.g. <input type=”submit”>, <input type=”image”> and <button> elements) to be able to override the action attribute of the form; for instance if different buttons should submit the form to different URLs. No more JavaScript to do this!

formenctype

For buttons that submit a form to be able to override the form’s specified encoding

formmethod

For buttons that submit a form to be able to override the form’s method attribute, in case a button should change the method.

formnovalidate

Append to a submit button to bypass form validation.

formtarget

For buttons that submit a form to be able to override the form’s target attribute.

list

To connect with a <datalist> element by its id, to use its <option> elements as suggestions.

max

Maximum value for the value that can be put in.

min

Minimum value for the value that can be put in.

multiple

Allows for selection of multiple files for <input type=”file”> elements, and for multiple e-mail addresses separated by a comma.

novalidate

Applies only to the <form> element, and prevents a form from being validated before submitted.

pattern

Declaring what pattern should be used for validating a field’s value, in the form of a regular expression.

placeholder

Meant to be able to display a hint to the end user what to input. (Side note: I wrote a blog post discussing the desired behavior of the placeholder attribute)

readonly

If a field should be readonly.

required

For validation purposes, if a field is required or not.

spellcheck

Lets the web browser know if it should spell check the contents or not.

step

Possibility to control the size of each step for elements that accepts number or date input.

Examples

Examples of the new attributes:

1.<input type="text" autocomplete="off">

1.<input type="text" autofocus>

1.<input type="submit" formaction="http://example.org/save" value="Save">

1.<input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype">

1.<input type="submit" formmethod="POST" value="Send as POST">

1.<input type="submit" formnovalidate value="Don't validate">

1.<input type="submit" formtarget="_blank" value="Post to new tab/window">

1.<input type="text" list="characters">

2.<!-- Note: See a complete example in the New elements section below. -->

1.<input type="range" max="95">

1.<input type="range" min="2">

1.<input type="file" multiple>

1.<form action="http://example.org" method="GET" novalidate>

1.<input type="text" pattern="[A-Z]*">

2.<!-- Note: It is case sensitive, so you need to supply both lower- and upper-case letters if you want to allow that. -->

1.<input type="placeholder" name="first-name" placeholder="E.g. John Locke">

1.<input type="text" readonly>

1.<input type="text" required>

2.<!-- Note: Some web browsers have to have a name attribute for this to work (this could also apply to other HTML5 Forms features, so pro tip is to always have a name attribute for form elements). -->

1.<input type="text" spellcheck="true">

2.<!-- Note: Has to be set to true or false, just an attribute present doesn't work -->

1.<input type="number" step="3">

Demo Page

You can see all of these new attributes applied to form elements in the HTML5 Forms attributes demo.

New Elements

datalist

Contains a number of <option> elements with values that can be used as suggestions for other form elements through the usage of the list attribute on them.

keygen

Offers a way to create a public/private key pair where the public key is sent with the form. (Ok, I’ll be honest – probably not the new element that will get you the most excited… Also it seems like Internet Explorer are not interested in implementing it either)

meter

The meter element is for displaying values on a bar, where you can custom control min, max and assigned value. You can also specify low, high and optimum to set up different kind of areas of the bar.

output

Dedicated to output the result of a calculation in the page, for instance sliding a <input type=”range”> back and forth.

progress

Meant to be used to indicate progress of any kind in a web page, for instance file upload progress.

Examples

Example code of using these elements:

Note that the value attribute is the value being read out for its connected <input> element. In some web browsers, the inner text of the <option> element, if set, overrides the value attribute; in other web browsers only the value attribute is taken into consideration. So the best way to make it work is using the value attribute for suggestions.

1.<input type="text" name="characters" list="data-list">

2.<datalist id="data-list">

3.<option value="Hugo Reyes">

4.<option value="Jack Shephard">

5.<option value="James 'Sawyer' Ford">

6.<option value="John Locke">

7.<option value="Sayid Jarrah">

8.</datalist>

1.<keygen name="key"></keygen>

Important to note for the <output> element is that support for the JavaScript event oninput for the <form> element is required (it used to be an onforminput event on the <output> but that has now been deprecated). The code in the example below detects whether there is existing support for the oninput event, and if yes, applies an event handler that updates the value of the <output> element according to the value set for the <input type=”range”> element.

01.<meter min="0" max="10" value="7"></meter>

02. 

03.<input type="range" id="range" name="range">

04.<output for="range" id="output"></output>

05. 

06.<script>

07.(function () {

08.var theForm = document.getElementById("the-form");

09.if ("oninput" in theForm) {

10.theForm.addEventListener("input", function () {

11.output.value = range.value;

12.}, false);

13.}

14.})();

15.</script>

1.<progress max="100" value="70">70%</progress>

Demo Page

All the new elements are available to test in the HTML5 Forms elements demo.

Web Browser Support

As you can imagine, web browser support for such a vast amount of different features is varying. Another factor that plays in is that there’s room for interpretation in the specifications how some form elements should be displayed, and the expected behavior of them. There are a few compatibility lists that I like and I recommend taking a look at:

• The Current State of HTML5 Forms
• HTML5 tests – inputs
• HTML5 tests – inputs (mobile)

However, I strongly urge you to test as much as possible yourself. Things are changing constantly when it comes to web browsers nowadays (about time, right?) and not all test tables will be up to date. It could also be that a web browser claims to support something when tested with feature detection, but in reality it doesn’t work. Or, it works, but the user experience is not the one you want to convey.

So code like crazy, but evaluate the result of your code and how end users will perceive it: after all, we do this to give them the best experience!

Mobile Improvements

One important thing to also bear in mind is with myriad of mobile devices, tablets et al, is that while there might not necessarily be support for a certain input type, by using it, it could trigger the most appropriate keyboard layout to make inputting information as smooth as possible for the end user. This means a number keyboard layout for <input type=”number”>, URL layout for <input type=”url”> etc.

Downside: Styling

While we have an abundance of new features for forms in HTML5 and CSS3 pseudo-classes for styling elements (e.g. :valid, :invalid, :required), one of the major shortcomings is that there are very few ways to style the native controls like datepicker, range, validation messages etc. And sure, we could argue that it’s great for end users if form elements look the same across all web sites, to give them the soothing calm of consistency.

But there are two important reasons why that will never suffice:

• The styling supplied for various form elements always seem to be a bit of a low priority when they surface, and over time they get better. But many people believe that the design of form elements leave a lot to desire.
• Web sites will always have the need to make the design consistent with the rest of the web site, for a better user experience and for branding. This is inevitable, and if we don’t provide it for them for HTML5 Form elements, they will very likely go back to using JavaScript-powered solutions for all of the above, and I don’t believe anyone really gains from that.

At the time of writing, there a few ways you can style HTML5 Form elements in WebKit, in this fashion:

1./* Remove default input type="search styling */

2.input[type="search"] {

3.-webkit-appearance: textfield; /* You could also use none */

4.}

1./* Style placeholder text */

2.input::-webkit-input-placeholder {

3.color: #ffffa2;

4.}

There are a bunch more, and you are interested, you can read up on them in Styling Form Controls Using Pseudo Classes. Do beware that this is not standard, and that they might change over time (but hey, if you have a deadline now, who cares?  .

There have also been suggestions mentioned by Peter Gasston on how we could add some new CSS pseudo-classes to handle this. For example:

1./* Note that this is not valid CSS code and won't work anywhere */

2.input::error {

3.position: below;

4.}

Do Something Formtastic!

As you can see with all the new input types, attributes and elements, a lot of the things we spent countless hours on implementing before will be native in web browsers, saving us a lot of work and offering users something extremely well tested and implemented. With HTML5 really comes a revolution on the web with open standards to try and meet all the needs of developers, and it is all implemented in a very fast pace.

I’d like to urge you to use these new HTML5 Forms features, be it just for some more semantic value or for offering a lot of the new functionality as well. They are here to make things better for you, so evaluate them, learn their tricks and tweaks, and make sure to let your feedback go to web browser vendors and specification writers, so they can ensure that they will meet the needs of the development community.

Now go do something formtastic!