How do forms work in html

At this point you should find the Introductory guides easy to understand, and also be able to make use of our Basic native form controls guide. Mastering forms however requires more than just HTML knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls.

Therefore, before you look at the other sections listed below we'd recommend that you go away and learn some CSS and JavaScript first. The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.

The first article in our series provides your very first experience of creating a web form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.

With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form. This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks. Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements.

Sending data is not enough — we also need to make sure that the data users enter into forms is in the correct format to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and not get frustrated when trying to use our apps.

Just apply the number value to the type attribute of the applicable input element. For example:. In the past, the only way to limit field input to alphanumeric characters was to use jQuery or JavaScript and craft a custom function. However, HTML5 added the pattern attribute for input elements which can be used to restrict a form field to accept alphanumeric input only.

In this case, the pattern element will accept lowercase letters, uppercase letters, and numbers. The second part of the value in curly braces stipulates how many total characters may be entered into the field.

Browser support for this relatively new attribute is really pretty good. However, all other browsers do support the attribute. Web accessibility specs are clear: design forms to allow implicit submission. What is implicit submission? Submitting a form by pressing enter. Browsers are designed to support implicit submission. Take this form for instance:. If you were focused on any element in that form and pressed enter, the form would be submitted.

This is implicit submission and all modern browsers support this behavior. Hit enter while focused on any element in this form and the form will still be submitted. So how do developers break this behavior? The browser knows what to submit by grouping together everything between the form tags.

Which, when rendered by the browser, would produce a button that looked like a button but did not do anything when enter is pressed.

Usually, developers have good intentions when they do things like this. Form validation is a good thing, but creating a barrier to accessibility in the name of form validation is not a good thing. So, what should you do instead of disabling implicit submission?

Leave implicit submission intact and use JavaScript to add an event listener to each field. Use the event listener to trigger form validation like this. That code leaves implicit submission intact, but still runs validation code when the user presses enter. Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page.

Learn more. Contents 1 Defining the Structure of a Form 1. Paragraph content. Enter Text Here. Jon is a freelance writer, travel enthusiast, husband and father. There are a lot of form-related elements — different kinds of buttons, inputs, selectors for various types, feedback mechanisms… all sorts of things.

In short: forms are complicated , maybe the most complicated aspect of HTML. See our main forms index page for links to all of our form-related tutorials and documentation.

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more. You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server.

This control is used for items that require only one line of user input, such as search boxes or names. Used to give a name to the control which is sent to the server to be recognized and get the value. This is also a single-line text input but it masks the character as soon as a user enters it. Indicates the type of input control and for password input control it will be set to password.

This is used when the user is required to give details that may be longer than a single sentence. Checkboxes are used when more than one option is required to be selected.