HTML.form.guide

    How to add reCaptcha 2 to Contact Form 7 (updated 2019)

    CAPTCHA is an acronym for “completely automated public Turing test to tell computers and humans apart.”. If you post a form on your website, you will most probably start getting spam posts through your form. This is because there are “bots” (these are just scripts that just scrape through websites) that are coded to keep traversing the internet looking for forms to submit. Since you always read form submissions from your form, the spammers get to send you marketing messages easily.

    Continue Reading →

    Google reCaptcha 2 JavaScript Validation (client side)

    reCaptcha is a great “bot” detection solution from Google. Google watches the pattern of user interaction to decide whether it is a “bot” or a real user. It is near impossible for a “bot” to simulate those patterns. So reCaptcha succeeds in blocking spam most of the time. Versions of reCaptcha reCaptcha version 1 reCaptcha version 1 used to show a couple of words in an image and the user had to enter the words in a box to prove they are not “bots”.

    Continue Reading →

    How to create a Button with Rounded Corners using CSS

    In CSS3 you can give elements rounded corners with the border-radius property. Let’s look at an example of this. Suppose you have the following markup. <div class="red_div"></div> To make the div visible, we’ll set its width and height and give it a background color of red. .red_div { background-color: red; width: 200px; height: 100px; } The following is the resulting output of the above. To make the div’s borders rounded, you could add the following styling:

    Continue Reading →

    How to create a select box with multiple selections

    Having drop downs on our web page enhances the overall quality and design on the screen. A drop-down thus works as an alternative and in specific cases, a better option, as compared to radio buttons and checkboxes. Wait, what? Did we say an alternative to both radio buttons and checkboxes? But, it should have been just the radio button, shouldn’t it? A radio button does not allow more than one selections and a checkbox, on the other hand, allows one or more than one selections.

    Continue Reading →

    How to use the HTML5 range input type

    Before the introduction of HTML5, thinking about having a range slider on a webpage was equivalent of a crime. You needed a bunch of custom javascript code and still it didn't work well on all devices. However, HTML5 brought with it numerous new attributes and features that added the flavor that HTML missed for ages. Not many would have expected something like the range element to make its entrance with HTML5, but once it did, hardly any have raised any concerns with its working.

    Continue Reading →

    How to limit the max length of input in a textarea

    The textarea in HTML is where the user can type in his answers or responses to the queries in free text. Unlike radio buttons, checkboxes and dropdowns, there are no fixed options, it is like the answer sheets we have during our exams. Wait, we know what you are thinking? “I usually write the same things multiple times for the same question in different ways to ensure the length of my answer goes up, what if the user does the same in the textarea?

    Continue Reading →

    How to validate an email address using JavaScript

    Validating email address using regular expressions is tricky and is often not recommended. The reason is simple. A valid email address as defined by RFC 2822 can be quite complex. A valid email is of the format: name@domain The name can be a set of ‘atoms’ separated by dots. In its simplest form like this: john.doe@domain now, the atoms can contain alpha-numeric characters Any of these characters ! $ & * - = \^ ` | ~ # % ‘ + / ?

    Continue Reading →

    HTML submit button onclick code

    An HTML button is created using the following HTML code: <input type='submit' name="submit" value="Post Form" /> Or using the button tag like this: <button type="submit" >Post the form</button> In both the cases, pressing the button will submit the parent form without the need for handling the onclick event separately. If you want to validate the form before submitting, the best event handler would be the onsubmit event of the form. Example:

    Continue Reading →

    Examples of javascript form validation using regular expressions

    In this tutorial you will see how to use regular expressions to validate. Through a list of examples , we will build a script to validate phone numbers , UK postal codes, along with more examples. First, let’s start by building the webpage and the validation code then we will talk about the regular expressions used to validate the strings. First go to your html file and paste the following code :

    Continue Reading →

    How to handle HTML checkbox events

    The HTML checkbox input element allows you to select a single value for submission in a form for example if you are creating a form and want to know if the applicant is fluent in English or not you can have a checkbox and if the user thinks he/she is fluent in English he/she checks it if not leaves it unchecked . In this tutorial we are going to learn

    Continue Reading →