Category: html-form

Fixing the auto-focus

Focusing on an input element just as the user loads the form will easily be a great usability enhancement. However, doing it the wrong will cause problem for at least some users.

How to Make a Form in HTML

Forms are essential components of any good website. A form makes it possible to collect user input. In this tutorial, we will learn how to create a form in HTML and we will also see how to process the form data.

How to make a form

This is a beginners tutorial on making web forms.

Let us first see the working of a web form.

A form has two parts: the client-side and the server-side.

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

  1. How to handle onclick and onchange events and the difference between them
  2. How to handle checkbox events in Jquery
  3. How to submit a form when checkbox is clicked
  4. Show/ Hide a section of the form when checkbox is clicked

To start working with checkboxes we will create a form that contains a checkbox , in this example we will be building a form that takes a user name and has also a checkbox that the user should check if he thinks he is fluent in English , if not a prompt will appear showing the user a text that says you need to be fluent in English to apply for the job.

Setting the Form Action with a JavaScript Function

In an HTML form, the action attribute is used to indicate where the form's data is sent to when it is submitted. The value of this can be set when the form is created, but at times you might want to set it dynamically. In this tutorial, we'll look at ways in which a form's action attribute can be set dynamically by JavaScript.

Simfatic Forms: HTML form generator tool

Hand-coding HTML forms using the common web design tools used to be a long and cumbersome process. HTML code for the form is just one part of the whole web form. You need the server side processing script as well. Simfatic Forms is a tool that fills this gap. You can design the web form using the visual editor. No coding is required. Simfatic Forms generates all the required code ( The HTML code and the server side processing script).

HTML form input examples

HTML form input examples

When you are creating an HTML form, there are several different options for input elements to use. If you can efficiently use the non-textbox components as much as possible, you will make your form easier on your users. To start your HTML form, just enter the opening and closing tags

and
. Between these two tags, you will fit as many other elements as necessary. Here, each of them will be explained in detail along with examples of exact source code needed to implement them.

HTML input type password field - example code and techniques

The HTML <input type="password"> element is a specific type of input elements used to create input fields that deal with passwords . It is designed to deal with passwords so it’s more secure than the normal <input type='text'> we see in every form on the internet.

First: It makes the password not visible to anybody sitting around you by showing "." or "*" instead of the characters you type.

Second: Browsers treat inputs with text type and password types differently, browsers may try to automatically refill the text input types if they have been previously entered which is something you may not always want.

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. A user can select only one option from a drop-down list and therefore it resembles just the radio button in its functionality and not the checkboxes, right? Well, this is where the concept of multiple selections in a select box comes into play.

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?"

Well, in HTML forms, it would not be the quantity but the preciseness and the quality that will bring us more laurels, and it is highly unlikely that users would fill in long essays in a textarea when they are not getting marks for it, however; the points stands totally valid and as a designer we must be prepared for the worst scenarios.

In fact, the entire use case is totally possible in certain scenarios. One such case would be when the user is submitting a proposal for a job application portal and he needs to fill in the textarea with the question, ‘Tell us about yourself?’

Now, a user might finish this question in one line and another might need more than a thousand to finish the story of his life. However, it is highly unlikely that the reader who is expected to shortlist candidates on the bases on these questions is interested in your life story. Instead, he is interested in a short and precise answer which can help him in analyzing the person and his attributes.

Now, even if the candidates are not willing to take their hands off the lid and limit their storytelling prowess, but we, as web designers, must ensure that we limit their hands and provide a useful platform for both the applicants as well as the company. This is where the maxlength attribute comes to our rescue.

How does the maxlength attribute limit the characters in a textarea?

The maxlength attribute invariable puts the brakes on the free-flowing writer in us and lets us know that the textarea is certainly not the place to try our hands on something new.

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. Creating anything close to the sliding range element takes tons of lines of coding in JavaScript, but the same can be achieved with just a single element in HTML5. How often do you hear that something could be done better in HTML than JavaScript?

As the name suggests, the most common use of the slider input is when we know the lowest and the highest inputs that can be given as a response. For instance, if we are developing a website that only permits users in the age group 18-40. We can have the birth year as a sliding input range with the lowest value being 1986 and the highest being 1998. The slider input is a highly intuitive user interface that projects itself as an alternative to a plain textbox input or a drop-down with fixed values.