HTML forms - the basics (2023)

introduction

Everyone has seen a shape. Everyone used one. But did you code one?

Most areas where you can enter information on web pages are created using HTML forms, such as entering text or numbers into a text box, checking a box, "filling in" a radio button, or selecting an option from a list. The form is normally submitted to the website when you submit the form and the data is used in some way eg. B. Customer data is stored in a database for later use, or a website is updated immediately after a shopper chooses a product to view or comment on a blog post.

It's easy to create a form, but how about a usable form that your users can fill out seamlessly instead of getting frustrated and tired? In this article theweb standards curriculumWe'll cover all the fundamentals you need to know to create elegant and accessible form structures with HTML, starting with the real basics and moving on to some more complex features. We'll then cover the new HTML5 form features separately in the next article:HTML5 Form Add-ins. We've done it this way because it's useful to see what the difference is, and at the time of this writing (August 18, 2011), support for HTML5 forms is not yet available in all browsers.

Step One: The Basic Code

Let's start by creating a comment form, the kind of form you'd use on a website to let people give you feedback on something like an article you've written or a product you've sold. We start very simply:

<form> Nome: <input type="text" name="name" id="name" value="" /> E-Mail: <input type="text" name="email" id="email" value =" " /> Comentários: <textarea name="comments" id="comments" cols="25" rows="3"></textarea> <input type="submit" value="submit" /></ formulário>

If you type this into an HTML document and open that document in a browser, the code will render as shown in Figure 1.

Figure 1: The first example of a basic form.

Try it yourself - type the code above into your own sample HTML document and load it in a browser orClick here to navigate to the form on a separate page. Try playing around with the different form controls to see what you can do with them.

If you read the code you will see an opening<Form>label, one</form>closing tag and a few bits in between. The element contains three entries into which you can enter information: two single-line text entries and one multi-line text entry.

What do we have here

That one<Form>Element

The <form> element is needed to include the form - without it you don't have a web form. That one<Form>tag can have some attributes that are explained in step 2, but note that you cannot nest forms inside each other.

That one<Enter>Element

<Enter>: This element defines an area where you can enter information in some way.

That oneTypeAttribute

There are differentTypeit's from<Enter>Element that we will see later, but in this case we will use<input type="text">to indicate that we want single-line text input fields (the type attribute is required). We also put "Name" and "Email" labels next to it to give our website visitors a clue as to what information to put there.

That oneNameAttribute

1<Enter>Element must also have aNameAttribute that you, as a developer, can decide. The only exceptions to this rule are special cases where theWertThe attribute is always set to the same value as thisTypeAttribute, ztype="send"ortype="restart") that you, as a programmer, can decide. That oneNameThe attribute is required for the database or other data destination to uniquely identify this data item.

When the form is submitted, most scripts use theNameattribute to place the form data in a database or in a human-readable email. So if the<Enter>The element is for the site visitor to enter their name, so thisNameattribute would bename="name"orname="first name", etc

That oneWertAttribute

1<Enter>Element must also have aWertAttribute. The value this attribute takes depends on the element it is used on:

• If the value matches what the user types, theWertAttribute can be set to empty —Wert = ""– This tells the processing script to just paste whatever the site visitor types into the field. If you enter a value inWertattribute, it appears in the text entry as an initial value, which the user can override.
• For a more complex entry with a specific set of options, such as a checkbox or radio button, you can set the value of the options to any starting value you like.
• In cases where there is only one value for the user to enter nothing, such as B. "submit" or "hidden", set the value to the final entry. For example, you can definevalue="e"to set the initial selection of a Yes/No radio button pair to Yes. and would you usevalue="send"for a submit button

Let's discuss a more detailed example of how theWertUsed attribute:

• First, let's think of an empty-valued attribute whose value determines the user's input.
  • The code says:<input type="text" name="vorname" id="vorname" value="" />
  • User types: jennifer
  • The value offirst nameis sent asJenniferwhen the form is submitted.
• Now let's think about a certain value:
  • The code says:<input type="checkbox" name="mailing-list" id="mailing-list" value="no" />
  • The user selects the checkbox if they want to join the site's mailing list.
  • The value ofmailing listwill be sent as "Yes" when submitting the form.

To die<text area>Element

after two<Enter>elements, you might see something a little different – ​​the<text area>Element. This provides a multi-line text entry area and you can even specify how many lines of text can be entered. Notice thatcolumnselinesAttributes - these are required for alltext areaelement and specify how many columns tall and how many lines wide you want the text area to be. Values ​​are measured in characters.

<input type="enviar">

Last but not least, you have a special<Enter>Element with the attributevalue="send". Rather than rendering a single-line textbox for input, theto sendinput renders a button that, when clicked, sends the form to the destination where you want the form to submit its data.

Step Two: Adding Structure and Behavior

But wait! If you run the first example, fill it out, and hit submit, it doesn't do anything! Why? And why does it look so bad and all in one line? The answer is that we still haven't structured it or defined a place where the data collected by the form should be sent.

Let's go back to the drawing board with a new form:

<form id="contact-form" action="script.php" method="post"> <input type="hidden" name="redirect" value="http://www.opera.com" /> < ul> <li> <label for="name">Nome:</label> <input type="text" name="name" id="name" value="" /> </li> <li> < label for="email">E-mail:</label> <input type="text" name="email" id="email" value="" /> </li> <li> <label for=" comments" >Comentários:</label> <textarea name="comments" id="comments" cols="25" rows="3"></textarea> </li> <li> <input type="submit" value= "enviar" /> <input type="reset" value="reset" /> </li> </ul></form>

This form looks like Figure 2 when rendered in a browser:

Figure 2: The second form example - looks better.

You mayPlay with the improved form on a separate page by clicking here.

Here I made some additions to the simple basic shape. Let's break it down so you know what I did:

provide the formI could

i added oneI couldattribute to provide a unique identifier for the form, making it easy to style with CSS or manipulate with JavaScript if needed. You can only have one at a time.I couldper page; In this case I calledContact Form.

That oneMethodAttribute: tell data how to travel

Lights, camera, action! If you clicked the submit button on the first form and nothing happened, it's because there was no action or method. That oneMethodThe attribute specifies how the data is sent to the script that processes it. The two most common methods are "GET" and "POST".

• The "GET" method sends the data in the URL of the page (sometimes you will see URLs likehttp://www.example.com/page.php?data1=value1&data2=value2...; these are bits of data that are transported with the "GET" method). Unless you have a specific reason to use GET, it's probably best not to use it when trying to send secure information, as anyone can see the information as it's transmitted over the URL.
• "POST" sends the data through the script supporting the form to an email to be sent to the site administrator or to a database to be stored and retrieved later, instead of "GET" -URL."POST" is the safest and generally best option.

If the security of the form data is very important to you, for example if you are sending a credit card number to a shopping site, you should use the https protocol with Secure Socket Layer (SSL). Basically, this means that data is sent over the https protocol, not the http protocol. Take a look at the URLs the next time you pay on a shopping site or use online banking - chances are you'll see themhttps://in your address bar, nohttp://. The difference is that an https connection is a little slower to transmit than http, but the data is encrypted so that someone hacking the data connection cannot understand it during transmission. Contact your web host for information on how they can provide https and SSL.

That onePlotAttribute: tells the data where to go

That onePlotThe attribute specifies which script file to send the form data to for processing. Many web hosts have a generic email submission script or other form script available for use (see your host's documentation for information) that they have customized for their servers. On the other hand, you can use a server-side script that you or someone else has created to run your form. Most of the time, people use languages ​​like PHP, Perl or Ruby to create a script that processes the form - for example, you can send an email with the form information or insert the form information into a database. to store for later use. It is outside the scope of this part of the course to write a server-side script for you, or to teach you how to write server-side code yourself - check with your host to find out what they offer, or find a good programmer to do this. with friendship

hidden form entries

The second line added to our form from step two is the "hidden" input field - this is a redirect. What? In order to separate the markup structure from the presentation and behavior, the ideal is to use the script that drives the form to also redirect the user after submitting the form. You don't want your users to sit and look at the form page and wonder what to do after submitting the form; We're sure you'll agree that redirecting your users to a thank you page with "Next Steps" links after successful form submission is a much better user experience instead. This specific example indicates that after submitting this form, the user will be redirected to Opera's homepage.

Structure with an unordered list

To improve the appearance of the form, we put all the form elements in an unordered list so that we can use CSS to fit the HTML structure and improve the appearance of the form by aligning and enhancing it a bit. Some people would argue that you shouldn't use an unordered list to mark up a form, but a set of<div>elements instead. To be completely honest, we think either way is fine, so pick the one that suits you best.

accessibility labels

Finally, in step two, we label the form elements. It is better to specify all form elements properly<tag>Items - these labels are associated with their respective form items, specifying the<Enter>e<text area>elementsI coulds that have the same value as the labelsProattributes. This is great because not only does it visually indicate the purpose of each form field on the screen, it also gives the form fields more meaning semantically. Additionally, a visually impaired person using the page with a screen reader can now see which label goes with which form element and get a better idea of ​​what data to fill in which input. That oneI coulds can also be used to target individual form fields with CSS styles.

Now you're probably wondering whyI couldAttributes are also included as identifiers on form elementsNameattributes. the answer is this<Enter>elements withoutNameAttributes are not passed to the server, so they are definitely needed.I couldAttributes are needed to map form elements to corresponding ones<tag>Elements. Therefore, you must use both.

The 2nd form appears a little better, but we could add more. Time to improve the structure even more!

Step Three: Add Some More Complex Form Elements

The next version of the form looks like this:

<form id="contact-form" action="script.php" method="post"><ul><li><label for="name">Nome:</label> <input type="text" nome ="name" id="name" value="" /></li><li><label for="email">E-mail:</label> <input type="text" name="email" id= "email" value="" /></li><li><label for="pwd">Senha:</label> <input type="password" name="pwd" id="pwd" value=" " /></li></ul><ul> <li>Marque todas as emoções que se aplicam a você: <ul> <li><label for="angry">Irritado</label> <input type= " checkbox" name="angry" id="angry" value="angry"></li> <li><label for="sad">Triste</label> <input type="checkbox" name="triste" id="sad" value="sad"></li> <li><label for="happy">Feliz</label> <input type="checkbox" name="feliz" id= "feliz" valor = "feliz"></li> <li><label for="ambivalent">ambivalente</label> <input type="checkbox" name="ambivalent" id="ambivalent" value="ambivalent "></ li > </ul> </li> <li>Qual ​​é o seu grau de satisfação com o nosso serviço? <ul> <li><label for="vsat">muito satisfeito</label> <input type="radio" name="satisfaction" id="vsat" value="vsat"></li> <li> <label for="sat">Satisfeito</label> <input type="radio" name="satisfaction" id="sat" value="sat"></li> <li><label for="dcare" >Não me importo</label> <input type="radio" name="satisfaction" id="dcare" value="dcare"></li> <li><label for="disat">Insatisfeito< / label > <input type="radio" name="satisfaction" id="disat" value="disat"></li> <li><label for="vdisat">muito insatisfeito</label> <input type =" radio" name="satisfaction" id="vdisat" value="vdisat"></li> </ul> </li> <li><label for="comments">Mais comentários:</label> < textarea name="comments" id="comments" cols="25" rows="3"></textarea></li></ul><ul> <li><label for="photo">biografia foto :</label> <input type="file" name="photo" id="photo" value="" /></li> <li><label for="location">Local visitado:</label > <select name="location" id="location"> <option value="">Selecione o local</option> <option value="nyork">Novo Yo rk</option> <option value="vancouver">Vancouver</option> <option value="atlantis">Atlantis</option> <option value="alpha">Alpha Centauri</option> <option value=" blackpool">Blackpool</option> <option value="bognor">Bognor Regis</option> </select></li></ul><li><input type="submit" value="submit" / ></li> </form>

When rendered in a browser, this form looks like the one shown in Figure 3.

Figure 3: Some new and more complex form elements!

To view and play with this form live in a browser,follow this link.

What do we add here? Let's take a look.

Checkbox: Provides multiple yes/no options

The first thing we add is a set of checkboxes:

<li>Mostre todas as suas emoções e diga: <ul> <li><label for="angry">Angry</label> <input type="checkbox" name="angry" id="angry " value ="angry" check="checked"></li> <li><label for="sad">Traurig</label> <input type="checkbox" name="sad" id="sad" value =" traurig"></li> <li><label for="happy">Feliz</label> <input type="checkbox" name="happy" id="happy" value="happy"></ li> <li><label for="ambivalent">ambivalent</label> <input type="checkbox" name="ambivalent" id="ambivalent" value="ambivalent"></li> </ul>< /li >

Nothing special to know here: each individual element creates a checkbox that can be checked and unchecked by the site visitor. They are identified by IDs and their data is identified by theirNameattributes. When submitting the form, all unverified data items will be submitted as disabled/not.

Radio Buttons: A multiple choice option

Next, we have a set of radio buttons:

<li>How satisfied are you with our service? <ul> <li><label for="vsat">Very satisfied</label> <input type="radio" name="satisfaction" id="vsat" value="vsat" check="checked"></ li> <li><label for="sat">Satisfied</label> <input type="radio" name="satisfaction" id="sat" value="sat"></li> <li><label for="dcare">I don't care</label> <input type="radio" name="satisfaction" id="dcare" value="dcare"></li> <li><label for=" disat " >Dissatisfied</label> <input type="radio" name="satisfaction" id="disat" value="disat"></li> <li><label for="vdisat">Very dissatisfied</ label> <input type="radio" name="satisfaction" id="vdisat" value="vdisat"></li> </ul></li>

The only difference to the checkboxes here (besides theTypeattribute value, of course) is theNameValues ​​- note that they are all the same. This is because with checkboxes you are dealing with separate data items with on/off values, whereas with sets of radio buttons you are dealing with a single data item that can have one of multiple values. They haveNameAttributes that are all set to the same value make all these radio buttons part of the same set, and you can only select one of them at a time.

The checked attribute

notice thatcheckedattribute in the above two bits of code - this will cause the defined element to be selected by default when the page first loads.

Send a file

<li><label for="photo">Biografiefoto:</label> <input type="file" name="photo" id="photo" value="" /></li>

This line of code creates a file uploader that you can use to upload a photo, for example.

Select and option: Create a multi-line dropdown menu

The last new part of the code looks like this:

<li><label for="location">Besuchter Ort:</label><select name="location" id="location"> <option value="">Ort auswählen</option> <option value="nyork ">Nova York</option> <option value="vancouver">Vancouver</option> <option value="atlantis">Atlantis</option> <option value="alpha">Alpha Centauri</option> <option value="blackpool">Blackpool</option> <option value="bognor">Bognor Regis</option></select></li>

That one<select>Element is quite different from the others you've seen: it creates a single-line form control that, when activated, scrolls down to reveal the various available options, as defined in<Option>Elements. TheWertThe attribute contains the actual data that is submitted when you submit the form (the only one submitted is the one you select before clicking submit), and the values ​​that the user sees are the text content within the Elements.

Step Four: Additional Structuring with Field Sets and Labels

That onefinal shape exampleis identical to the last one, except we wrap the various main parts of the form<set of fields>Elements and each given its own<legend>Element. For example:

<fieldset><legend>Anmeldedaten</legend><ul><li><label for="name">Nome:</label> <input type="text" name="name" id="name" value = "" /></li> ...</fieldset>

When rendered in a browser, they look like Figure 4.

Figure 4: More structuring with fieldset and legend.

Explain fieldset and caption

<set of fields>e<legend>are not mandatory, but very useful for more complex shapes and presentations.

That one<set of fields>element, you can structure the form into semantic modules. For example, in a more complex form, you can use different<set of fields>s address information, billing information, customer preference information, etc. That one<legend>element, you can add a label to each<set of fields>Section.

A little style...

I've also applied some CSS to this form to style the structural markup. This is applied to the third form example using an external style sheet —Click this link to see the styles. The two most important tasks basic CSS must do are adding margins to align labels and input fields and removing bullets from the unordered list. Here is the CSS that resides in the external style sheet:

#contact-form fieldset {width:40%;}#contact-form li {margin:10px; list style: none;}#contact form input {margin-left:45px; text-align: left;} #contact-form textarea { margin-left:10px; Textausrichtung:links;}

What it does The first line arranges the fieldset frame so that it doesn't take up the entire page; You can also set the limit to none with{limit: none;}if you didn't want a The second line puts a 10 pixel border on the<li>Items to create a little visual space between each list item and eliminate bullets. The third and fourth lines define a left margin<Enter>e<text area>elements so they don't overwhelm the labels and line up a little better.

You can see that bit of CSS makes it look better, but there's still work to be done before it looks really good. If you would like more information on how to create a form, please contact us.design shapesorNick Rigby's A List Apart article on "More Accessible Ways". You will also learn more about margins and borders later in this course.

resume

In this article, we covered the basics of creating a standards-compliant best practices form!

practical questions

It's time to program your own contact form.

1. Create a simple contact form that asks the user for their name, email address and a comment.
2. Add a checkbox asking if the reader would like to join your mailing list.
3. Use some CSS to style your form: set a form width, left-align labels, give your page a background color, etc.
4. Find out what the<group of options>element does and use it in your form.

Note: This material was originally published as part of the Opera Web Standards curriculum, available as20: HTML Forms - The Basics, written by Jennifer Hanen. Like the original, it is published under theCreative Commons Attribution NonCommercial-Share Alike 2.5license.

Next:HTML5 form add-ins.