Form elements are a key aspect of HTML that allows communication between web browser & server.


A quick example of how a common feedback form will look like

This username is available

This email is invalid


Usage
<div class="field">
    <label class="label" for="name">Name</label>
    <div class="control">
        <input class="input" type="text" placeholder="Text input" id="name" />
    </div>
</div>

<div class="field">
    <label class="label" for="username">Username</label>
    <div class="control">
        <input
            class="input is-success"
            type="text"
            placeholder="Text input"
            value="Username"
            id="username"
        />
    </div>
    <p class="help is-success">This username is available</p>
</div>

<div class="field">
    <label class="label" for="email">Email</label>
    <div class="control">
        <input
            class="input is-danger"
            type="email"
            placeholder="Email input"
            value="hello@example.com"
            id="email"
        />
    </div>
    <p class="help is-danger">This email is invalid</p>
</div>

<div class="field">
    <label class="label" for="select-example">Subject</label>
    <div class="control">
        <div class="select" id="select-example">
            <select>
                <option>Select dropdown</option>
                <option>With options</option>
            </select>
        </div>
    </div>
</div>

<div class="field">
    <label class="label" for="message">Message</label>
    <div class="control">
        <textarea class="textarea" placeholder="Textarea" id="message"></textarea>
    </div>
</div>

<div class="field">
    <div class="control">
        <label class="checkbox">
            <input type="checkbox" />
            I agree to the <a href="#">terms and conditions</a>
        </label>
    </div>
</div>

<div class="field">
    <div class="control">
        <label class="radio">
            <input type="radio" name="question" />
            Yes
        </label>
        <label class="radio">
            <input type="radio" name="question" />
            No
        </label>
    </div>
</div>

<div class="field is-grouped">
    <div class="control">
        <button class="sgds-button is-link">Submit</button>
    </div>
    <div class="control">
        <button class="sgds-button is-text">Cancel</button>
    </div>
</div>

<div class="field has-addons">
    <div class="control">
        <input class="input" type="text" placeholder="Find a repository" />
    </div>
    <div class="control">
        <a class="sgds-button is-info">
            Search
        </a>
    </div>
</div>

Guidelines

Forms should:

  • Include characters outside of the standard Roman alphabet.
  • Only show error validation messages after a user has interacted with a particular field.
  • Contain clear and concise labels.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team