Form Inputs

Here are some options.

.error This changes the input style to show the error.

.success This changes the input style to show sucess.

.message Add a div after the input and add the class of message.

disabled Add disabled to the input

  • Correct!
  • Not a valid response
<form action="#" autocomplete="off">
	<ul class="form-fields">
        <li>
            <label for="general">Text</label>
            <input type="text" name="general" id="general">
        </li>
        <li class="success">
            <label for="success">Success</label>
            <input type="text" name="success" id="success" value="A correct value">
            <div class="message">Correct!</div>
        </li>
        <li class="error">
            <label for="error">Inline errors</label>
            <input type="text" name="error" id="error" value="An incorrect value">
            <div class="message">Not a valid response</div>
        </li>
        <li>
            <label for="disabled">Disabled</label>
            <input type="text" name="disabled" id="disabled" disabled>
        </li>
        <li>
            <label for="email">Email</label>
            <input type="email" name="email" id="email">
        </li>
        <li>
            <label for="tel">Tel</label>
            <input type="tel" name="tel" id="tel">
        </li>
        <li>
            <label for="password">Password</label>
            <input type="password" name="password" id="password">
        </li>
        <li class="optional">
            <label for="textarea">Text box</label>
            <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
        </li>
    </ul>
</form>