HTML Ingredient: kind

Instance

Syntax

1

<kind motion="https://google.com/search" technique="get">

2

   <enter kind="search" title="q" placeholder="Search...">

3

   <enter kind="submit" worth="Search Google...">

4

</kind>

Consequence

Browser Assist

The HTML <kind> tag is supported in all fashionable browsers. Learn extra on caniuse.com. 

Attributes

The <kind> tag helps International Attributes in HTML. International Attributes are frequent to all HTML parts and can be utilized on all of them (although they could not have a lot of an impact on a few of them).

The <kind> component additionally helps the next attributes:

• motion: URL to make use of for kind submission
• technique: HTTP technique to make use of for kind submission (“GET”; “POST”)
• enctype: Kind information set ecoding kind to make use of for kind submission ("software/x-www-form-urlencoded"; "multipart/form-data"; "textual content/plain")
• title: Identify of kind to make use of within the doc.kinds API
• accept-charset: Character encodings to make use of for kind submission
• novalidate: Bypass kind management validation for kind submission
• goal: Shopping context for kind submission.
• autocomplete: Default setting for autofill characteristic for controls within the kind

Which Technique?

The GET and POST strategies are used to switch information. We will use each strategies to ship kind information, although GET is used to request information whereas POST is used as a manner of sending information to an online server. The clearest distinction between the 2 is that GET appends the request parameter to the URL, like this:

Content material

Inside a <kind>, circulate content material and palpable content material are supported.

Right here’s a typical kind construction with examples of component hierarchy. You’ll discover the <ul> and <li> parts getting used to comprise the radio buttons. <p> and <div> parts are generally used to wrap different kind controls, and <part> is completely advantageous for holding associated teams of kind inputs.

1

<kind>

2

    <fieldset>

3

        <legend>Most well-liked use of ketchup</legend>

4

        <ul>

5

            <li>

6

                <enter kind="radio" title="ketchup" id="ketchup_1" worth="burger" />

7

                <label for="ketchup_1">Burger</label>

8

            </li>

9

            <li>

10

                <enter kind="radio" title="ketchup" id="ketchup_4" worth="fries" />

11

                <label for="ketchup_2">Fries</label>

12

            </li>

13

            <li>

14

                <enter kind="radio" title="ketchup" id="ketchup_3" worth="cheese sandwich" />

15

                <label for="ketchup_3">Cheese sandwich</label>

16

            </li>

17

        </ul>

18

    </fieldset>

19

    <p>

20

        <enter kind="submit" worth="Submit reply" />

21

    </p>

22

</kind>

Accessibility Concerns

• Management labeling: Label all kind controls appropriately. There are two methods to affiliate labels with kind controls:

  1. by giving the management an id, and referencing that id within the for attribute on the label.
  2. by wrapping the shape management within the label.

• Autocomplete: On inputs use the  autocomplete="" attribute for frequent information varieties (like title, deal with, birthdate and many others.) Many browsers will recommend the person’s personal particulars for even quicker kind entry.
• Tabbing: To dictate the tab order of interactive parts (like inputs) you should use the tabindex attribute. tabindex="0", for instance, could be the primary component to get focus when hitting the Tab key on the keyboard.

Be taught Extra