How To Create A Form With Icons - W3Schools

How TO - Form with Icons ❮ Previous Next ❯

Learn how to create a form with icons.

Register

Register

Try it Yourself »

How To Create an Icon Form

Step 1) Add HTML:

Use a <form> element to process the input. You can learn more about this in our PHP tutorial. Then add inputs for each field:

Example

<form action="/action_page.php"> <h2>Register Form</h2> <div class="input-container"> <i class="fa fa-user icon"></i> <input class="input-field" type="text" placeholder="Username" name="usrnm"> </div> <div class="input-container"> <i class="fa fa-envelope icon"></i> <input class="input-field" type="text" placeholder="Email" name="email"> </div> <div class="input-container"> <i class="fa fa-key icon"></i> <input class="input-field" type="password" placeholder="Password" name="psw"> </div> <button type="submit" class="btn">Register</button></form>

Step 2) Add CSS:

Example

* {box-sizing: border-box;}/* Style the input container */ .input-container { display: flex; width: 100%; margin-bottom: 15px;}/* Style the form icons */.icon { padding: 10px; background: dodgerblue; color: white; min-width: 50px; text-align: center;}/* Style the input fields */.input-field { width: 100%; padding: 10px; outline: none;}.input-field:focus { border: 2px solid dodgerblue;}/* Set a style for the submit button */.btn { background-color: dodgerblue; color: white; padding: 15px 20px; border: none; cursor: pointer; width: 100%; opacity: 0.9;} .btn:hover { opacity: 1;} Try it Yourself »

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Tip: Go to our CSS Flexbox Tutorial to learn more about the flexible box layout module.

❮ Previous Next ❯ ★ +1 Sign in to track progress