How TO – Form with Icons
Learn how to create a form with icons.
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
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– Add icon library –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.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;
}
</style>
</head>
<body>
<form action=”/action_page.php” style=”max-width:500px;margin:auto”>
<h2>Register Form</h2>
<div>
<i></i>
<input type=”text” placeholder=”Username” name=”usrnm”>
</div>
<div>
<i></i>
<input type=”text” placeholder=”Email” name=”email”>
</div>
<div>
<i></i>
<input type=”password” placeholder=”Password” name=”psw”>
</div>
<button type=”submit”>Register</button>
</form>
</body>
</html>