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
<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>