minstyle.io allows you to simply design attractive and complete forms. Different styles are available on the <input>, as shown below:
<div class="col-s-12">
<label for="Login">Login</label>
<input type="text" value="Login" id="Login">
</div>
<div class="col-s-12">
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password">
</div>
<div class="col-s-12">
<label for="Login">Login</label>
<input type="text" value="Login" id="Login" class="ms-rounded">
</div>
<div class="col-s-12">
<label for="Login">Login</label>
<input type="text" value="Login" id="Login" class="ms-large">
</div>
<div class="col-s-12">
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password" class="ms-small">
</div>
<div class="col-s-12">
<label for="Login">Login</label>
<input type="text" value="Login" id="Login" class="ms-green">
</div>
<div class="col-s-12">
<label for="Login">Login</label>
<input type="text" value="Login" id="Login" class="ms-red">
</div>
<div class="col-s-12">
<label for="Login">Login</label>
<input type="text" value="Login" id="Login" class="ms-blue">
</div>
<div class="col-s-12">
<label for="Login">Login</label>
<input type="text" value="Login" id="Login" class="ms-yellow">
</div>
<form>
<fieldset>
<div class="col-s-12 col-m-6">
<label for="name">Name</label>
<input type="text" value="Name" id="name" disabled="">
</div>
<div class="col-s-12 col-m-6">
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password" class="ms-blue">
</div>
<div class="col-s-12 col-m-6">
<label for="mail">Mail</label>
<input type="email" value="mail@mail.fr" id="mail" class="ms-green">
</div>
<div class="col-s-12 col-m-6">
<label for="password2">Password</label>
<input type="password" placeholder="Password" id="password2" class="ms-red">
</div>
<div class="col-s-12 col-m-6">
<label for="small">Small</label>
<input type="text" value="Small" id="small" class="ms-small">
</div>
<div class="col-s-12 col-m-6">
<label for="large">Large</label>
<input type="text" placeholder="Large" id="large" class="ms-large">
</div>
<div class="col-s-12 col-m-6">
<label for="number">Number</label>
<input type="number" placeholder="Number" id="number">
</div>
<div class="col-s-12 col-m-6">
<label for="select">Select</label>
<select id="select">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p class="ms-form-text">Select your value !</p>
</div>
<div class="col-s-12 col-m-6">
<label for="selectm">Multiple select</label>
<select id="selectm" class="ms-select-multiple" multiple="">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col-s-12 col-m-6">
<label for="rounded">Rounded</label>
<input type="text" value="Rounded" id="rounded" class="ms-rounded">
</div>
<div class="col-s-12">
<label for="textarea">Textarea</label>
<textarea placeholder="My comment..." id="textarea"></textarea>
</div>
<div class="col-s-12">
<input type="checkbox" id="checkbox">
<label class="label-inline" for="checkbox">Checkbox</label>
</div>
<div class="col-s-12">
<input class="ms-btn ms-rounded ms-large ms-green" type="submit" value="Send">
<a class="ms-btn ms-border-bottom ms-red">Cancel</a>
</div>
</fieldset>
</form>