HTML forms - the basics (2023)


  • 1. Introduction
  • 2 First Step: The Basic Code
    • 2.1 The <form> element
    • 2.2 Das <input>-Element
    • 2.3 Das type-Attribut
    • 2.4 The Name Attribute
    • 2.5 The Value Attribute
    • 2.6 the <textarea> element
    • 2.7 <input type="enviar">
  • 3 Step Two: Add Structure and Behavior
    • 3.1 Give the form an ID
    • 3.2 The method attribute: telling the data how to travel
    • 3.3 The Action attribute: telling the data where to go
    • 3.4 Hidden form submissions
    • 3.5 Structuring with an unordered list
    • 3.6 Accessibility Labels
  • 4 Step Three: Add Some More Complex Form Elements
    • 4.1 Checkbox: Provides multiple yes/no options
    • 4.2 Radio buttons: a multiple choice option
    • 4.3 The checked attribute
    • 4.4 Uploading a file
    • 4.5 Pick and choose: creating a multi-line drop-down menu
  • 5 Step Four: Additional Structuring with Field Sets and Labels
    • 5.1 Explanation of the field set and caption
    • 5.2 A bit of style...
  • 6 Summary
  • 7 practice questions


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.

(Video) Learn HTML forms in 8 minutes 📝

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="" /> < 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.

(Video) Learn HTML Forms In 25 Minutes

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 like; 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.

(Video) Make Your First HTML Form - Easy Explanation (2021)

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:

(Video) [HTML-Tutorial-19] Basic Form | form, input, label, button elements | Web Development for Beginners

<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 shapesorNick Rigby's A List Apart article on "More Accessible Ways". You will also learn more about margins and borders later in this course.


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.


What are the basic elements of HTML form? ›

The HTML <form> element can contain one or more of the following form elements:
  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>

What is HTML in simple form? ›

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. .

How to create forms in HTML? ›

To create an HTML form, we will use the HTML <form> element. It starts with the <form> tag and ends with the </form> tag. We can add the input elements within the form tags for taking user input. form elements, such as text box, textarea, etc.

What are forms used in HTML? ›

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

What are the 12 basics of HTML? ›

Common HTML elements
  • Section elements. <div>, <span>, <header>, <footer>, <nav>, <main>, <section> ...
  • Text content. <h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li> ...
  • Forms. <form>, <input>, <button>, <label>, <textarea> ...
  • Images and Links. <img>, <a> ...
  • Others. <br>, <hr>
Jan 12, 2021

Which are the 3 basic components in HTML? ›

An HTML element is defined by a start tag, some content, and an end tag.

How does HTML form work? ›

The web browser displays the HTML form. The visitor fills in the form and submits. The browser sends the submitted data to the web server. A form processor script running on the web server processes that form data.

What are the four basic types of HTML? ›

6 Basic HTML data types
  • Case information.
  • SGML basic types.
  • Text strings.
  • URIs.
  • Colors. Notes on using colors.
  • Lengths.
  • Content types (MIME types)
  • Language codes.

What are the 4 types of forms? ›

  • QUESTION : What are the four types of forms ? ...
  • ° Simple forms, each representing a subset of the application's data.
  • ° Composite forms, composed of several simple forms.
  • ° Ad hoc grids, in which you aren't confined by the form's design.
May 8, 2021

What are HTML forms and why are they so important? ›

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.

What is the main purpose of forms? ›

Forms are used to collect the required information in a logical, meaningful fashion for communication and pass to another entity. When you picture what a form is, you can conjure many different types of documents. A purchase order, a survey, a service request, or a tax return might come to mind.

What are the basic types of form? ›

The types of forms:
  • Simple forms, each representing a subset of the application's data.
  • Composite forms, composed of several simple forms.
  • Ad hoc grids, in which you aren't confined by the form's design. You can change which data you work with and how it's laid out.

Are HTML forms still used? ›

HTML forms were invented and mostly standardized before the advent of asynchronous Javascript and complex web applications. Today, we use form inputs, buttons, and other interaction mechanisms in lots of different ways; but underlying that is a system based on the HTTP request-response paradigm.

Is basic HTML easy to learn? ›

HTML is perhaps one of the easiest front-end programming languages to master. So if you want to learn HTML, then go for it! With patience and practice, you'll learn to make the most of this popular language.

What is the most basic part of HTML? ›

All HTML documents must start with a document type declaration: <!DOCTYPE html> . The HTML document itself begins with <html> and ends with </html> . The visible part of the HTML document is between <body> and </body> .

What are the 8 basic HTML tags? ›

8 of the Most Important HTML Tags for SEO
  • Title tag. Title tags are used to set up those clickable headlines that you see in the SERP: ...
  • Meta description tag. ...
  • Heading (H1-H6) tags. ...
  • Image alt text. ...
  • Schema markup. ...
  • HTML5 semantic tags. ...
  • Meta robots tag. ...
  • Canonical tag.
Mar 27, 2020

What is the most important tag in HTML? ›

The most important tags for an HTML document is doctype, <html>, <head> and <body>. doctype is the doctype declaration type. It is used for specifying which version of HTML the document is using.

What are the 2 types of tags in HTML? ›

There are two kinds of HTML tags: paired and unpaired. Paired tags require an opening tag that turns a formatting feature on and a closing tag that turns the feature off. Paired tags must surround the text you want formatted with that feature. For example, <u> and </u> will underline text.

How do we create a form? ›

Create a new form
  1. Choose an option: From, click Blank or choose a template. ...
  2. Name your form: In the top-left corner, click Untitled form or the template form name and enter a new name.
  3. (Optional) Do any of the following actions: Add a description: Under the form name, add your text.

What are HTML form attributes? ›

The form attribute specifies the form the element belongs to. The value of this attribute must be equal to the id attribute of a <form> element in the same document.

What is the advantage of forms in HTML? ›

Ability To Manage Data.

Web forms ultimately make data much easier to sort and manage. This is because the forms collect basic information.

What are the 5 forms? ›

All English verbs (except to be) have five forms: base, past tense, past participle, present participle, and third-person singular.

What are the 2 types of form? ›

In art, all forms are either geometric or organic.

How do you create an input field in HTML? ›

The <input> tag specifies an input field where the user can enter data.
The different input types are as follows:
  1. <input type="button">
  2. <input type="checkbox">
  3. <input type="color">
  4. <input type="date">
  5. <input type="datetime-local">
  6. <input type="email">
  7. <input type="file">
  8. <input type="hidden">

Are forms necessary in HTML? ›

The HTML form tag is required when you want to collect information that visitors provide. For example, you may want to collect specific data from visitors, such as name, email address, and password. The HTML <form> tag is used to create a form.

What are the two most important attributes of the HTML form tag? ›

The answer to the above question is the two most important attributes of form tags, and these are: The action and the method attribute. The action attribute tells the web browser where to send the information (or on which server to post the data).

How to create a text box in HTML? ›

How to Make a Text Box in HTML
  1. Step 1: Create a label element. To start, create a <label> element. ...
  2. Step 2: Create an input element. ...
  3. Step 3: Define any other attributes needed. ...
  4. Text Box with Maxlength Attribute. ...
  5. Text Box with Minlength Attribute. ...
  6. Text Box with Placeholder Attribute. ...
  7. Text Box with Size Attribute.
May 27, 2022

What is form action in HTML? ›

The formaction attribute specifies the URL of the file that will process the input control when the form is submitted.

How to collect data from HTML form? ›

The method attribute specifies how to send form-data (the form-data is sent to the page specified in the action attribute). The form-data can be sent as URL variables (with method="get" ) or as HTTP post transaction (with method="post" ). Notes on GET: Appends form-data into the URL in name/value pairs.

What are three important parts of forms? ›

Form in web page have 3 important part : a tag , form element & a button

What are the advantages of forms? ›

Advantages of forms include the following:
  • One has to write less (while the printing is almost universally done in some automatic way)
  • One is told or reminded what information has to be supplied.
  • There is uniformity, for convenience in processing.

What is the benefit of forms? ›

A form might be used for a personal application or to take customer details for an account setup. Online forms provide you with an easy to implement, secure solution to gather the data you need in a consistent automated manner.

What are the basic properties of forms? ›

The form properties panel controls the overall configuration of the form, including the form name, format, editing and appearance options.
  • Form Name. You can use any name you want. ...
  • Format. ...
  • Tab Order. ...
  • Variables. ...
  • Scroll Bars. ...
  • Use Server for Lookup. ...
  • Background Color. ...
  • Multiple Column Labels/Reports Options.

What are the principles of form? ›

The Form Principle is the co-ordination of all factors dealing with line, tone, and color. This book is laid out on the Form Principle, since it enters into everything you will ever do, or see, in the field of illustration. We shall attempt to clarify its various applications as we go along.

What is form format? ›

Overview: What is form/format? A form is a document that has a set template for the presentation of data or information. Format is the layout with which the data is presented.

What will replace HTML? ›

That leads us to the more pragmatic answer: XML is already replacing HTML... sort of. You probably know that the World Wide Web Consortium (W3C) is responsible for the HTML standard, currently at version 4.01.

Why HTML is not replaced? ›

HTML won't be replaced as a standard any time soon. It's too wide spread a technology, and the amount of re-education required among people working with webapps and websites to switch technology completely would be massive and very costly. HTML will however, like any other technology, evolve.

How do I make my HTML form more attractive? ›

You can use the following CSS properties to make this input field more attractive.
  1. Padding (to add inner spacing)
  2. Margin (to add a margin around the input field)
  3. Border.
  4. Box shadow.
  5. Border radius.
  6. Width.
  7. Font.
Mar 23, 2020

What are the 3 elements of form? ›

In terms of art, form refers to objects that are 3-Dimensional, or have length, width, and height.

What are the 5 elements of HTML? ›

HTML5 Elements and Attributes
  • Audio Element.
  • Canvas Element.
  • contenteditable Attribute.
  • Input Types.
  • Keygen Element.
  • Meter Element.
  • Output Element.
  • Progress Element.

What are 4 elements of form? ›

Primary elements of form are the point, the line, the plane and the volume. The Point indicates a position in space.

What are the 4 categories of form? ›

Form can be represented by four categories: representational, objective, realistic, and naturalist.

What are the 4 basic essential tags in HTML? ›

There are four required tags in HTML. These are html, title, head and body. The table below shows you the opening and closing tag, a description and an example. These are the tags you put at the beginning and end of an HTML file.

What are the 20 basic HTML tags? ›

A few of the basic tags that can be seen in almost all the HTML documents are <HTML>, <! Doctype html>, <head>, <span>, <body>, <p>, <div>, <u>, <sub>, <sup>, <strong>, <em>, <hr>, <br>, <li>, <ol>, <ul>, <a href =…>, header tags like h1, h2, h3, .., <img src=””/>, etc.

What is the most important HTML? ›

The most important tags for an HTML document is doctype, <html>, <head> and <body>. doctype is the doctype declaration type. It is used for specifying which version of HTML the document is using. <!

How do I start HTML code? ›

All HTML documents must start with a document type declaration: <!DOCTYPE html> . The HTML document itself begins with <html> and ends with </html> . The visible part of the HTML document is between <body> and </body> .


1. HTML Forms Basics Part 1
(Stefan Mischook)
2. HTML & CSS Crash Course Tutorial #3 - HTML Forms
(The Net Ninja)
3. HTML Tutorial for Beginners: HTML Crash Course
(Programming with Mosh)
4. Create a simple form with HTML and CSS Just in Minutes || Registration from
(Code And Design)
5. 24: Forms In HTML and CSS | How To Create A Form | Learn HTML and CSS | HTML Tutorial | CSS Tutorial
(Dani Krossing)
6. Learn HTML in 12 Minutes
(Jake Wright)
Top Articles
Latest Posts
Article information

Author: Jeremiah Abshire

Last Updated: 01/02/2023

Views: 5824

Rating: 4.3 / 5 (74 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Jeremiah Abshire

Birthday: 1993-09-14

Address: Apt. 425 92748 Jannie Centers, Port Nikitaville, VT 82110

Phone: +8096210939894

Job: Lead Healthcare Manager

Hobby: Watching movies, Watching movies, Knapping, LARPing, Coffee roasting, Lacemaking, Gaming

Introduction: My name is Jeremiah Abshire, I am a outstanding, kind, clever, hilarious, curious, hilarious, outstanding person who loves writing and wants to share my knowledge and understanding with you.