HTML.form.guide

Code Snippets

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 →

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 Add a Label to HTML Radio Button

Radio button allows user to choose only one of the pre-defined options. Each radio button must be accompanied by a label describing the choice it represents. There are two ways to label radio button elements. One is to enclose the whole <input type="radio"> tag inside <label> </label> tags: <label> <input type="radio" name="choice" value="HTML" /> Learn HTML </label> <label> <input type="radio" name="choice" value="Java" /> Learn JavaScript </label> Another alternative is to provide an ID for each radio element and then use that ID in the for attribute of the label.

Continue Reading →

How to Create a “Yes/No” Radio Button

Using radio button to accept Yes/No questions is best because the field accepts only one of the options. It is better than a dropdown because there are only two choices - either of them can be selected by a single click Here is the code to create a yes/no radio button. <input type=”radio” name”affirmative” value=”yes” checked> Yes </input> <input type=”radio” name”negative” value=”no”> No </input> Demo See the Pen How to create Yes/No radio button Also see: HTML Form input examples

Continue Reading →