HTML Form Elements

<form>

A section containing interactive controls for submitting information.

Web forms
  • Very powerful tool for interaction with users. Examples of common uses:
    • Collecting data from users
    • Allowing them to control a user interface
  • Some essential aspects:
    • HTML structure
    • Styling form controls
    • Validating form data
    • Submitting data to server
  • Learn more starts here: Web forms — Working with user data
Structure example
<form>
    <fieldset>
        <legend>
        <input>
        <label>
        ...
Associating other form elements to the <form> element aka form owner
  • Being nested inside <form> element.
  • Using <form>'s id attribute
    • Use attribute id to give a unique id to which other elements can refer.
    • Use this id as value for attribute <form> of those other elements.
Example
Simple form
<form action="" method="get">
    <div>
        <label for="name">Enter your name: </label>
        <input type="text" name="name" id="name" required>
    </div>
    <div>
        <label for="email">Enter your email: </label>
        <input type="email" name="email" id="email" required>
    </div>
    <div>
        <input type="submit" value="Subscribe!">
    </div>
</form>
CSS pseudo-classes
  • :valid and :invalid
    • To style the form based on whether elements inside are valid or not
General attibutes
  • Accept-charset
    • Space separated character encodings the server accepts.
    • Browser using then in the order of the list.
    • Default: same encoding as the page. Read up: Content-Encoding.
  • autocomplete
    • Define whether input elements by default can have their values automatically completed by the browser.
    • Possible values:
      • on
      • off – Browsers tend to ignore this if they suspect login forms.
  • name
    • Contains name of the form.
    • Value's rules:
      • Must not be an empty string.
      • Must be unique among the form elements in the form collection.
  • rel
    • Creates hyperlink or annotation depending on the value.
    • This is an extensive attribute. To learn more, check: HTML attribute: rel
Attibutes for form submission
  • method
    • Specify HTTP method to submit the form with
    • The value can be overridden by formmethod attribute on <button>, <input type="submit">, or <input type="image"> elements.
    • Possible values (case insensitive):
      • post
      • get
        • GET method – Form data appended to the action URL with a ? separator.
        • Use this when the form has no side-effects. Read: idempotent
      • dialog
        • When the form is inside a <dialog>.
        • Closes dialog and throws a submit event on submission without submitting data or clearing the form.
  • action
    • URL that processes the form submission
    • The value can be overridden by formaction attribute on <button>, <input type="submit">, or <input type="image"> elements.
    • Will be ignored if method="dialog" is set.
  • enctype
    • "ENCode type"
    • Specifies how the form-data should be encoded when submitting it to the server.
    • If method="post", enctype is the MIME type of the form submission.
    • The value can be overridden by formenctype attribute on <button>, <input type="submit">, or <input type="image"> elements.
    • Possible values:
      • application/x-www-form-urlencoded
        • The default value
      • multipart/form-data
        • Use this if the form contains <input> element with type="file"
      • text/plain
        • For debugging purposes
  • novalidate
    • "no validate"
    • Indicates the form shouldn't be validated when submitted.
    • Boolean attribute
      • If it is not set, then the form is validated.
    • If it is not set, it can be overridden by formnovalidate attribute on <button>, <input type="submit">, or <input type="image"> elements
  • target
    • Indicates where to display the response after submitting the form
    • The value can be overridden by formtarget attribute on <button>, <input type="submit">, or <input type="image"> elements.
    • Some values:
      • _self: Load in current browsing context.
      • _blank: Load in new unnamed browsing context.
      • _parent: Load into the parent browsing context. If n/a, load in current.
      • _top: Load into the top-level browsing context. If n/a, load in current.

<label>

A text label for the associated element.

Attribute: for
  • Function: associating the label to a control element by their id attribute.
  • Attribute for can only contain 1 id: 1 label can only be associated to 1 control element.
  • Multiple label can be associated to 1 control element.
  • A form control that's labelled with a label element is called labelled control of the label element.
  • If there's more than 1 form control with the same id, label will only apply to the first one. That first control element will be the labelled control of the label element.
Labelling terminologies
  • Label element is <label>
  • Form elements can mean <form> but also can mean the rest of form related elements, like those discussed in this page.
  • Form controls or control elements are form elements that have control functions
  • Labelled control is a form control that is labelled.
  • Labelled control for a label is the form control that is labelled by that label element.
CSS styling
  • An inline element (and so are the form controls – check whether it applies to all)
  • Default styling: none
  • Position relative to its labelled control is as written in the HTML structure.
  • Don't place interactive element such as anchor inside label. Because label is already an interactive content.
Accessibility concerns
  • Interactive content
    • Examples: anchor <a> or <button>
    • Don't place interactive content inside label element. It makes it difficult to activate the form input.
  • Headings
    • <h1>-<h6>
    • Don't place heading element inside label element. It interferes with many kinds os assitive technology. For styling purposes, use CSS.
  • Buttons
    • <input type="button"> with valid value attribute doesn't need a label associated with it. It may interfere with assistive technology.
    • Same deal with <button>
Why association a label to an element?
  • Giving visual explaination
  • Giving programmatical explaination for example in assistive technology use, screen reader, etc.
  • Giving larger hit area
Examples: Input element with and without label
Label or paragraph around the input element (check-box) is highlighted. Click around to see the effect.
Without label element
This is a div box, not a label. Hit area only that small input check-box → 
<div>Div text
    <input type="checkbox">
</div>
Nested label-input elements
<label>Label text
    <input type="checkbox">
</label>
Label element connected to input element using for-id relationship
<label for="hit-area">Label text</label>
<input type="checkbox" id="hit-area">
Associates <label> to a control element such as <input>
  • Using attribute id-for relationship
    • Give a unique ID to <input> using attribute id.
    • Use that id value to point the <label> to <input> element using attribute for.
    • Can be written on the HTML codes directly represent their actual display position.
    • They don't have to be nested because id-for relationship is adequate. Both are inline text level elements.
    • More than 1 label element can be associated with one same input element.
    • <label for="inputId">
    • <input id="inputId">
  • Nest the control element inside <label>
    • Neither id nor for is needed.
  • A label element can have both for attribute and a child control element as long as the attribute points to the child element.
Input element with 2 label elements
<label for="username">Enter password:</label>
<input id="password">
<label for="username">Forgot password?</label>
Elements that can be associated with <label> include
  • <button>
  • <input> (except for type="hidden")
  • <meter>
  • <output>
  • <progress>
  • <select>
  • <textarea>
htmlFor
Method to set for attribute. Read here.

<meter>

The gauge element. A scalar value within a known range or fractional value.

General attribute
  • form
    • To associate the element to the <form> element it belongs to. Also called its form owner.
    • value = id of a <form> in the same document
    • When it is not set, the meter element will ne associated with its ancestor form element if any.
    • This attribute is used only if the element is being used as a form-associated element, for example displaying a range corresponding to an <input type="number">
Attributes regarding values in the gauge
  • min and max
    • Determining meter's overall min and max range.
    • Rule: min < max
    • Default values if unspecified
      • min = 0
      • max = 1
  • low and high
    • Indicating low and high markers within meter's overall min and max range
    • Rule: min < low < high < max
    • If they are not specified, or specified but with values outside min-max range, then:
      • low = min value
      • high = max value
  • optimum
    • Marking the optimal numeric value within meter's overall min and max range
    • Rule: min < optimum < max
    • When used together with with low and high attributes, it give an indication where along the range is considered preferred.
      • For example, if min < optimal < low, then the lower range is considered preferred.
    • Browser might color the meter's bar differently
  • value
    • Representing current numeric value.
    • Rule: min < value < max
    • If it is specified but outside the min-max range:
      • value = max value if it's higher than the range
      • value = min value if it's lower than the range
    • If unspecified or malformed, value of value is 0
Examples
Meter with just min, max, and value
Heat the oven to 350 degrees. 

Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
Meter with low and high
  • Ben got a B on the exam.
  • Cia got a B on the exam.
  • Don got a B on the exam.

Ben got a <meter low="69" high="80" max="100" value="85">B</meter>on the exam.
Cia got a <meter low="69" high="80" max="100" value="75">C</meter>on the exam.
Don got a <meter low="69" high="80" max="100" value="65">D</meter>on the exam.

<progress>

An indicator showing completion progress of a task. Typically as a progress bar.

Formula
<progress value="70" max="100">70%</progress>
Attributes
  • max
    • Indicates how much work required to be considered done.
    • Rule: max < 0
    • Must be alid floating point number
    • Default: 1
    • Minimum value is always 0 in progress.
  • value
    • Specifies how much of the task has been completed.
    • Rule: 0 < value < max
      • Remember max = 1 when not declared.
    • Value is indeterminate when not declared.
      • pseudo-class: :indeterminate
      • If you have given value a value, and then want to change it to indeterminate, you must remove the value attribute with element.removeAttribute("value")
Text content
Not a label. A fallback for old browser that doesn't support this element.
Accessibility concerns
  • Labelling
    • In most cases, provide accessible label
    • How:
      • Using ARIA labelling attributes aria-labelledby or aria-label just like for any element with role="progressbar"
      • Using <label> element.
    Progress with label
    70% 
            <label for="progress">File progress: </label>
        <progress id="progress" max="100" value="70">70%</progress>
  • Describing a particular region
    • If it describes loading progress of a section of a page, use aria-describedby to point to the status and set aria-busy="true" on the section being updated. Remove the aria-busy attribtue when the loading is finished.

<output>

A container into which a site or app can inject result or outcome of a user action.

Attributes
  • from
    • To associate the element to its form owner
    • Value is the <form>'s id
    • With this output element can be associated with any <form> element in the document, doesn't have to be inside it.
  • for
    • To specify from which elements the calculation made for the output should be derived from or influenced by.
    • Value is a space-separated list of those influencing elements' ids.
  • name
    • Element's name
    • Used in form.element API
Form submission
<output> value, name, and contents, are not submitted during form submission.
Examples
Output with intial values (incuding the typed-in output)
+ = 70 
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" name="a" value="40" /> +
    <input type="number" id="b" name="b" value="30" /> =
    <output name="result" for="a b">70</output>
</form>
Output without initial values
+ = 
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" name="a" /> +
    <input type="number" id="b" name="b" /> =
    <output name="result" for="a b"></output>
</form>
Accessibility concern and Aria
Read here.

<fieldset>

A grouping element that groups several controls and their labels together.

Structure
<fieldset>
    <legend>
Fieldset attributes
  • form
    • This attribute associates the <fieldset> to the <form> it should be a part of.
    • Value: the id of the <form>.
    • Using this, <fieldset> doesn't need to be nested inside the <form>
    • If the <input> elements inside <fieldset> should be associated with the <form>, then form attribute need to be directly applied to those elements.
  • name
    • Name associated with the group
  • disabled
    • Boolean attribute
    • If set, all form controls that are descendants of <fieldset> are disabled.
      • Not editable
      • Won't be submitted along with the <form>
      • Won't receive any browsing event like mouse click
      • Default display is grayed out.
      • Form elements inside <legend> won't be disabled.
Example
Fieldset with legend (default styling)
Age

HTML Codes 
<form>
    <fieldset>
        <legend>Age</legend>
        <input type="radio" id="20s" name="age">
        <label for="20s">20-29</label><br>
        <input type="radio" id="30s" name="age">
        <label for="30s">30-39</label><br>
        <input type="radio" id="40s" name="age">
        <label for="40s">40-49</label>
    </fieldset>
</form>
Fieldset disabled: bullets are greyed and can't be clicked.
Age

HTML Codes 
<form>
    <fieldset disabled>
        ...
Default styling
  • <fieldset>
    • display: block;
    • border: 2px groove
    • min-inline-size: min-content;
  • Anonymous box holding content of <fieldset>
    • Inherited some properties from <fieldset>, for examples:
      • If fieldset display: grid; or display: inline-grid;, then the box will be a grid formatting context.
      • If fieldset display: flex; or display: inline-flex;, then the box will be a flex formatting context.
      • Otherwise, block formatting context.

<legend>

Caption to its parent <fieldset>.

Structure
<fieldset>
    <legend>
Default styling
  • Placed over block-start
  • shrink-wrap
  • display is blockified
Example
Fieldset with styling class
Age

HTML Codes 
<form>
    <fieldset class="fieldset1">
        ...
CSS codes 
:root {
    --borderfill:rgb(250, 242, 243);
    --code: steelblue;
}

.fieldset1 {
    width: fit-content;
    border: 2px solid var(--borderdark);
    border-radius: 0.3rem;
}

.fieldset1 > legend {
    background-color: var(--borderdark);
    border-radius: 0.3rem;
    font-weight: bold;
    color: white;
    padding: 0.1rem 0.5rem;
}

.fieldset1 >input {
    margin: 0.5rem;
}

.fieldset1 > label {
    padding-right: 1rem;
    color: var(--code);
}

<select>

A control that provides a menu of <option> elements. Directly, or grouped within <optgroup> elements.

Structure
<select>
    <optgroup>
        <option>
Simple and extensive select examples
Simple select
HTML codes 
<form>
    <label for="beach-select">Choose a destination:</label>
    <select id="beach-select">
        <option>Pantai Pasir Putih</option>
        <option>Pantai Pangandaran</option>
        <option>Pantai Kenjeran</option>
    </select>
</form>
Extensive select using optgroup elements and various attributes
HTML codes 
<form>
    <label for="complete-select">Choose a destination:</label>
    <select name="destinations" id="complete-select">
        <optgroup label="Beach">
            <option value="pasir-putih">Pantai Pasir Putih</option>
            <option value="pangandaran">Pantai Pangandaran</option>
            <option value="kenjeran">Pantai Kenjeran</option>
        </optgroup>
        <optgroup label="Mount">
            <option value="bromo">Gunung Bromo</option>
            <option value="tangkuban-perahu">Gunung Tangkuban Perahu</option>
            <option value="semeru">Gunung Semeru</option>
        </optgroup>
    </select>
</form>
Attributes
  • form
    • To associate it with its form owner
    • The value is the id of that <form> element.
    • If the value is not set, the element will be associated with its ancestor <form> element is any.
    • With this, <select> element doesn't have to be nested inside its <form> owner.
    • It can override an ancestor <form> element.
  • id
    • So it can be associated with a <label>
  • name
    • Name of the control. Represents the name of hte associated data point submitted to the server.
  • multiple
    • Boolean attribute
    • Multiple options can be selected.
    • If not specified, only 1 option can be selected
    • When specified, most browser will show a scrolling list box instead of single line dropdown.
    • Read more
  • size
    • For when control is presented as a scrolling box (for example, when multiple is specified.
    • Represents how many rows of options can be shown at once.
    • Browsers are not required to present a select element as a scrolled list box.
    • Default is 0.
  • required
    • Boolean attribute
    • Indicating that an option with a non-empty string value must be selected.
  • disabled
    • Boolean attribute
    • Indicates user can't interact with the control.
  • autofocus
    • Boolean attribute
    • Only 1 form element in a document can have autofocus attribute
    • Specify the form control that should have input focus when the page load.
  • autocomplete
    • A DOMString provoding a hint for user agent's autocomplete feature.
    • See HTML autocomplete attribute for list of the values and details.
CSS styling
Styling is hard. References:

<optgroup>

Create grouping of <option> elements within a <select> element.

Structure
<select>
    <optgroup>
        <option>
<optgroup> note
It doesn't have to be nested
<optgroup> attributes
  • label
    • Mandatory
    • The name of the group of options
    • The value will be displayed
  • disabled
    • Boolean attribute
    • If set, none of the option group is selectable. Common styling is graying out. It won't receive browsing events.
Example with disabled optgroup
With a disabled optgroup
HTML codes 
<form>
<label for="available-select">Choose a destination:</label>
<select name="destinations" id="available-select">
<optgroup label="Beach" disabled>
    <option>Pantai Pasir Putih</option>
    <option>Pantai Pangandaran</option>
    <option>Pantai Kenjeran</option>
</optgroup>
<optgroup label="Mount">
    <option>Gunung Bromo</option>
    <option>Gunung Tangkuban Perahu</option>
    <option>Gunung Semeru</option>
</optgroup>
</select>
</form>

<option>

Define an item contained in <select>, <optgroup>, or <datalist>.

Structure
<select>
    <optgroup>
        <option>
<option> can be nested under
  • <select>
  • <select><optgroup>
  • <datalist>
<option> attributes
  • value
    • Value to be submitted with the form if the <option> got sellected.
    • If not define, the value is the text content
  • label
    • Text for the label indication meaning of the option.
    • If not define, the value is the text content
  • selected
    • Boolean attribute
    • If set, option is initially selected.
    • If <option> is descendent from <select> whose multiple attribute is not set, then only 1 <option> element can have the selected attribute.
  • disabled
    • Boolean attribute
    • If set, this <option> element is not checkable. Common styling is graying out. It won't receive browsing events.
Example with selected and disabled options and some styling
With a selected option
HTML codes 
<form>
    <label for="recommended-select">Choose a destination:</label>
    <select name="destinations" id="recommended-select">
        <optgroup label="Beach" >
            <option>Pantai Pasir Putih</option>
            <option disabled>Pantai Pangandaran</option>
            <option>Pantai Kenjeran</option>
        </optgroup>
        <optgroup label="Mount">
            <option>Gunung Bromo</option>
            <option selected>Gunung Tangkuban Perahu</option>
            <option>Gunung Semeru</option>
        </optgroup>
        <optgroup label="Island" disabled>
            <option>Bali</option>
            <option selected>Komodo Island</option>
            <option>Lombok</option>
        </optgroup>
    </select>
</form>
CSS codes 
.html-form-notes optgroup {
    color: var(--code);
    background-color: lightgoldenrodyellow;
    font-weight: bold;
}

.html-form-notes option {
    color: var(--code);
    background-color: lightyellow;
}
<option> CSS styling
  • It's very limited.
  • Do not inherit font set on the parent.
  • In Firefox, only color and background-color can be set.
  • In Chrome and Safari, no property can be set.

<datalist>

A collection of <option> elements available as choices for a control.

<option>

Define an item contained in <select>, <optgroup>, or <datalist>.

<input>

Interactive controls for forms for accepting data from users.

Types of input element
<input type="___">
  • Text fields
    • text
      • Default value
      • A single line text field.
      • Line breaks are automatically removed

      • <input type="text" name="text" placeholder="Type here...">
  • Date and time
    • datetime-local
      • A control for entering a date and time with no time zone.
      • Display: a date picker or numeric wheels for date and time components.

      • <input type="datetime-local" name="datetime-local">
    • time
      • A control for entering a time with no time zone.

      • <input type="time" name="time">
    • date
      • A control for entering a date, month, and year with no time zone
      • Opens a date picker or numeric wheels/li>

      • <input type="date" name="date">
    • week
      • A control for entering a week and the year, with no time zone.

      • <input type="week" name="week">
    • month
      • A control for entering a month and the year, with no time zone.

      • <input type="month" name="month">
    • Obsolete: datetime
      • Use datetime-local instead
  • Other specialized text field
    • tel
      • A control for entering a phone number.
      • It is not automatically validated to a particular format.
      • Displays a phone keypad in some devices with dinamic keypads.

      • <input type="tel" name="tel">
    • email
      • A field for entering an email address
      • Attribute multiple: multiple emails can be entered.
      • Has validation parameters.

      • <input type="email" name="email">
    • url
      • A field for entering a URL.
      • Has validation parameters

      • <input type="url" name="url">
    • number
      • A control for entering a number.
      • Displays a spinner and adds default validation when supported.
      • Displays a numeric keypad in some devices with dinamic keypads.
      • Doesn't take non-numeric key stroke.

      • <input type="number" name="number">
    • password
      • A control for entering password.

      • <input type="password" name="password">
    • search
      • A single-line text field for entering search strings.
      • Line breaks are automatically removed from the input value

      • <input type="search" name="search">
  • Check boxes
    • checkbox
      • Single check box, allowing single value to be selected/deselected.

      • <input type="checkbox" name="checkbox">
        <label for="checkbox"> I Agree</label>
    • radio
      • A single check box with a single value that can be selected/deselected.
      • Together with other radio buttons with the same name value, making a multiple choice selection system.
      • The default is, only 1 value in the group can be selected.



      • <input type="radio" name="food" id="nasigoreng" value="nasigoreng">
        <label for="nasigoreng">Nasi Goreng</label><br>
        <input type="radio" name="food" id="sate" value="sate">
        <label for="sate">Sate</label><br>
        <input type="radio" name="food" id="lumpia" value="lumpia">
        <label for="lumpia">Lumpia</label>
  • Buttons
    • button
      • A push button with no default behaviour
      • Display the value of the value attribute. Blank is the default.

      • <input type="button" name="button" value="Button">

      • <input type="button" name="button">
    • submit
      • A button that submits the form.
      • Display "submit" by default. To enter different value, use value attribute.

      • <input type="submit" name="submit">

      • <input type="submit" name="submit" value="Send form">
    • image
      • A graphical submit button
      • Attribute src: link to the image
      • Attribute alt: Text displayed when image SRC is missing

      • <input type>
    • reset
      • A button that resets the contents of the form to default values. Not recommended.
      • Display "reset" by default. To enter different value, use value attribute.

      • <input type="reset" name="reset">

      • <input type="reset" name="reset" value="Refresh">
  • Other input types
    • range
      • A control for entering number using a range widget.
      • Use this when the exact value is not important.
      • Default value is the middle value of the range.
      • Attribute min and max are used to define the range of acceptable values.

      • <input type="range" name="range" min="0" max="25">
    • color
      • A control for specifying a color.
      • Opening a color picker when supported.

      • <input type="color" name="color">
    • file
      • A control that lets the user select a file.

      • <input type="file" accept="image/*, text/*" name="file">
    • hidden
      • A control that's not displayed but whose value is submitted to the server.
      • It lets the web developers to include data that can't be seen or modified by users when a form is submitted.
      • Examples: Content id, unique security token.
      • Completely invisible, no way to make it visible in the page content.

      • <input type="hidden" name="hidden">

Input element is a very extensive element. Read more here: HTML Input Element

<button>

Clickable button, used to submit forms, or standard button functions

Very simple button with default styling
  • <button type="button">Click me</button>
  • Default style: (user agent)
Attributes
  • name
    • Name of the button. Submitted as a pair with the button's value as part of the form data when the button is used to submit the form.
  • value
    • Defines value associated with the button's name when it's submitted with the form data.
    • The value is passed to the server in params when the form is submitted using this button.
  • type
    • Default behaviour of the button.
    • Possible values:
      • submit
        • Submits the form data to the server.
        • Default value for a button associated with a form when attribute is not specified, or if the value is invalid or empty.
      • button
        • No default behaviour.
        • Does nothing when pressed by default.
        • It can have client-side scripts listen to the element's events.
        • Important: If the button is not for submitting form data, make sure to set this attribute value. Otherwise, it will try to submit form data and load the response that doesn't exist. This might destroy the current state of the document.
      • reset
        • Resets all the controls to their initial values.
        • Like <input type="reset">
        • Tends to annoy users.
  • autofocus
    • Boolean attribute
    • Specify the form control should be in focus when the page loads.
    • Only 1 element in a document can have this attribute.
  • disabled
    • Boolean attribute
    • Prevent user from interacting with the button. It can't be pressed or focused.
  • form
    • Associate the button with its form owner.
    • Value is the id of a <form> in the same document.
    • If not set, button will be associated with ancestor <form> if any.
    • When the attribute is set, it can override ancestor <form>.
  • formaction
    • The URL that processes the information submitted by the button.
    • Overrides form owner's action attribute.
    • Does nothing if there's no form owner.
  • formenctype
    • For a submit button (has form owner, type is not "button"), it specifies how to encode the form data that is submitted.
    • Overrides form owner's enctype attribute.
    • Possible values:
      • application/x-www-urlencoded: default
      • multipart/form-data: Use to submit <input> elements with type="file"
      • text/plain: Specified as a debugging aid, shouldn't be used for real form submission.
  • formmethod
    • For a submit button (has form owner, type is not "button"), it specifies the HTTP method used to submmit the form
    • Overrides form owner's method attribute.
    • Possible values:
      • post
        • Data from the form are included in the body of the HTTP request when sent to the server.
        • Use when it doesn't contain information that shouldn't be public like login credential.
      • get
        • Form data are appended to the form's action URL with a ? separator. Resulting URL is sent to the server.
        • Use when the form has no isde effects, like search form.
  • formnovalidate
    • For a submit button (has form owner, type is not "button"), it specifies that the form is not to be validated when submitted.
    • Overrides form owner's novalidate attribute.
    • Also avaliable on <input type="image"> and <input type="submit">
  • formtarget
    • For a submit button (has form owner, type is not "button"), it indicates where to display the response from submitting the form.
    • Overrides form owner's target attribute.
    • Some values:
      • _self: Load in current browsing context.
      • _blank: Load in new unnamed browsing context.
      • _parent: Load into the parent browsing context. If n/a, load in current.
      • _top: Load into the top-level browsing context. If n/a, load in current.
Attribute not recommended
  • Not standard: autocomplete
CSS styling
  • Inner HTML content such as <i>, <br>, and <img> possible
  • Can use pseudo-elements ::after and ::before
Accessibility concerns
Icon buttons
  • Buttons that only show an icon to represent dont have an accessible name that provides information for assistive technology.
  • To give an icon button an accessible name, describe the button's functionality as the text content.
  • This text can be hidden visually from the screen while still parsable by assistive technology using combination CSS properties. However probably better to leave it visible. User might not familiar with icon meanings.
Icon button
HTML codes 
<button name="favorite">
    <svg aria-hidden="true" viewBox="0 0 10 10">
        <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/>
    </svg>
    Add to favorites
</button>
Size and proximity
  • Size
    • For an interactive element like button, we should use large enough interactive area.
    • Recommended minimum size: 44x44 pixels (CSS)
  • Proximity
    • If multiple interactive contents like buttons are used in a close visual proximity, consider space them adequately to minimize error.
    • For example, use margin.
Read more

<textarea>

A multi-line plain-text editing control

Example
Textarea
HTML codes 
<form>
    <label for="comment">Comment:</label>
    <textarea id="comment" name="user-comment" rows="5" cols="50">Your comment here...</textarea>
</form>
Attributes
  • id
  • form
  • name
  • rows and cols
    • Defining the size of the text area
    • cols:
      • visible width of text control
      • Value positive integer
      • Default: 20
    • rows:
      • visible text lines for the control.
  • minlength and maxlength
    • Defining the size of the text area
    • minlength:
      • Minimum number of characters (UTF-16 code units) required that the user should enter.
      • Reducing characters to under the minlength is possible, but making the value invalid. And the element can be styled using pseudo-class :invalid
      • Empty textarea is considered to be valid, unless attribute required is used.
    • maxlength:
      • Maximum number of characters (UTF-16 code units) required that the user should enter.
      • Default: unlimited.
      • Can't type pass the maxlength.
    Textarea with min and maxlength

    HTML codes 
    <label for="about">About me (10-20 chars)</label><br>
<textarea name="about" id="about" rows="2" minlength="10" maxlength="20">I...
</textarea>
  • autocomplete
    • Possible values:
      • off
      • on
    • Default: form owner's autocomplete attribute value
  • autofocus
    • Boolean attribute
    • Indicates the form control should be in focus when the page load
    • There can be only 1 form-associated element in a document with this specified.
  • placeholder
    • A hint to user what can be entered in the control
    • Will dissapear when user start typing the value
    Textarea with placeholder

    HTML codes 
    <label for="bio">Bio (10-50 chars)</label><br>
<textarea id="bio" name="bio" rows="3" placeholder="I..." minlength="5">
</textarea>
  • disabled
    • Boolean attribute
    • Value can be inherited from the containing element such as <fieldset>
  • readonly
    • Boolean attribute
    • Indicates user can not modify the value of the control
    • User still can click / select in the control (unlike disabled)
    • The value is still submitted with the form.
    Disabled vs readonly textarea

    HTML codes 
    <textarea name="disabled" disabled>Disabled</textarea></br>
<textarea name="readonly" readonly>Readonly</textarea>
  • required
    • Specifies user must fill in the value before submitting the form.
  • spellcheck
    • Specifies the text is subject to spellchecking by the browser/OS.
    • Values:
      • true: element will have its spelling and grammar checked
      • default: Assume default behaviour, possibly parent's spellcheck attribute value.
      • false: element should not be spellchecked.
  • wrap
    • Indicates how the control wraps text.
    • Values:
      • hard:
        • Browser automatically insert line breaks (CR+LF) so that each line has no more than the width of the control.
        • cols attribute must be specified for this one to work.
      • soft:
        • Browser ensures all line breaks in the value consist of a CR+LF pair, but doesn't insert additional line breaks.
        • The default value
      • off (don't use)
        • Similar to soft, but changes appearance to white-space: pre, so line segments exceeding cols are not wrapped, and the textarea becomes horizontal scrollable.
Attribute not recommended
  • Not supported: value
  • Not standard: autocapitalize, autocorrect
Text content
Default content
CSS styling
  • Default: display: inline-block
  • Baseline can be different between browsers
    • Sometimes the first line, sometime the bottom of the box.
    • Don't try to force with vertical-align: baseline because the behaviour is unpredictable.
  • Resizeable
    • Textarea is resizeable in most browser. Check out the right-hand corner, try drag there.
    • To disable: textarea {resize: none;}
  • Style valid and invalid values differently
    • Using pseudo-classes :valid and :invalid
    • For example: within vs outside minlength, maxlength, or required.
    • Examples:
      • textarea:invalid {border: 2px dashed red;}
      • textarea:valid {border: 2px solid lime;}
  • More in styling: Styling with CSS
  • Also read: Styling web forms

Resources