Forms

Input elements for forms.

Note that these do not render on GitHub, but could be viewed as a static site or an IDE’s Markdown preview.

Examples mostly from W3Schools.

Form

<form action="/action_page.php" method="get">
    <div id="radio-toolbar">
    </div>
    <!-- etc. -->
</form>

Input

Input tag on W3 schools. It covers all the available type values.

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" size="50"><br><br>

<label for="pin">PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>

<input type="submit" value="Submit">

First name:

PIN:

Size attribute - Specifies the width of an <input> element, in characters. Default value is 20.

Tip: Always use the <label> tag to define labels for <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.

Text area

<label for="my-text">Label</label>
<textarea id="my-text" rows="4" cols="50">Text area input</textarea>

<textarea maxlength="50">
    Text area with max length
</textarea>

Text area tutorial.

Bulma note

If using Bulma for styling, you will find the inputs fill the width of their container.

input {
    width: 100%;
    max-width: 100%;
}

This can be overridden. In the example below, the search class is targeted.

.search.input {
    width: inherit;
}

Text input

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" size="50"><br><br>

<label for="pin">PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>

<input type="submit" value="Submit">

Size attribute - Specifies the width of an <input> element, in characters. Default value is 20.
Max length attribute - How many characters that can be entered. This could exceed size - all the text just won’t be visible at once.

Radio buttons

Tutorial

Note for must match id, but name is optional.

Package type:

<input type="radio" id="py" name="package-type" value="python" checked>
<label for="py">Python</label>

<input type="radio" id="npm" name="package-type" value="npm">
<label for="npm">NPM</label>

<input type="radio" id="ruby" name="package-type" value="ruby">
<label for="ruby">Ruby</label>

Checkbox input

<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label><br>

<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>

<input type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3">I have a boat</label><br><br>

<input type="submit" value="Submit">

I have a bike

I have a car

I have a boat

Form sections

Based on guide.

<form>
    <fieldset name='my-set'>
        <legend>Name of section</legend>

        <input type="checkbox" name='foo'>
    </fieldset>

    <!-- repeat -->
</form>