FormBuilder is a free desktop app that helps you easily create web form design, joomla contact form, templates website, contact forms and more in a few seconds without writing a single line of code. Create magical online forms in just a few clicks.
Forms in HTML have always been relatively simple for coders to make. The basic tag is <form>, with elements for input types such as text, email, and a submit feature.
But the latest HTML5 forms come with a ton of upgraded features to make HTML5 forms easier to make. Here are a few really helpful additions, including our favorite, HTML5 form validation.
Note: while most browsers support HTML5, it has not received official Recommendation by the World Wide Web Consortium. Recommendation is expected to be released by the end of 2014. Because of this, you should be sure your browser and version support HTML5 forms, or else you may lose some functionality.
1. Placeholder text
<input name="q" placeholder="Go to a Website">
Placeholder text in a form is most frequently used to give instructions. For example, placeholder text can include Enter your email address, or Your message must be 200 characters. With HTML5 forms, placeholder text cannot be altered to add images or change the text color.
2. Email Addresses
<input type="email">
Before HTML5, websites that asked for your email address simply collected this as a ‘text’ input type. There are benefits to having a specific type for an email address, especially with HTML5 form validation – more on that below.
iPhone users may be aware of Apple’s unique take on email addresses in an HTML5 form. When faced with an email input type, the iPhone keyboard will change to shorten the spacebar (recognizing that emails never contain spaces) and include an easily accessible @ sign and period.
3. Sliders for Number Entry
<input type="range"
min="0"
max="10"
step="2"
value="6">
One of the most common applications for this is on commerce websites such as Amazon. The site will generate a minimum (min) and maximum (max) value, such as the minimum and maximum prices of products that you are looking for. Step will say how much a “slide” will increase this number – for example, by 10 years or $100. And Value is the default “landing point” for your slider. Pretty simple.
4. Validation
(Automatically set)
HTML5 Form Validation is probably the best feature in HTML5 forms, and is best explained with email addresses. With the old <input type=”text”> fields, it became very difficult to distinguish between real and fake email addresses. New HTML5 forms come with automatic validation for email addresses; that is, the email must contain x@y.z to be considered a valid email address. The same technique also applies to URL and number fields.
If you don’t want automatic validation for your forms, you can start the form tag with
<form novalidate>.
5. Formoid
To create complex and beautiful HTML5 forms without all the hassle, visit formoid.com. Their software is free to download for Windows or Mac, and features a beautiful, easy-to-use interface where you can drag and drop the elements you need for your form. It includes your choice of themes, an anti-spam CAPTCHA, and much more.