Some of them are radio button, check button, submit button, file upload button, password, login , signup, etc.
You need to use both HTML and CSS so as to come up with a beautiful user interface that is, a good login or sign up interface.
In my codes, I have incorporated both HTML and CSS and my styles looks attractive.
Use this HTML codes;
<div id="input">
<h1>INPUT TYPES IN HTML</h1>
<p>
<label for="Name">Name </label>
<input type="text" id="txtName" required>
</p>
<br>
<p>
<label for="phone">phone </label>
<input type="tel" id="txtphone" required>
</p>
<br>
<label for="email">email </label>
<input type="email" id="txtemail" required>
<br>
<p>
<label for="password">password </label>
<input type="password" id="txtpassword" required>
</p>
<br>
<p>
<label for="checkbox">checkbox </label>
<input type="checkbox" id="checkbox" required>
</p>
<p>
<label for="radio">radio </label>
<input type="radio">
</p>
<p>
<label for="color">color </label>
<input type="color">
</p>
<p>
<label for="file">file </label>
<input type="file" required>
</p>
<p>
<label for="image">image </label>
<input type="image" required>
</p>
<div class="button">
<p>
<!-- -->
<input type="submit" name="Submit" id="Submit" value="Submit">
</p>
</div>
</div>
Use this CSS codes;
body {
background-color: rgb(157, 219, 219);
text-align: center;
}
.button {
color: rgb(13, 54, 236);
}
#Submit {
background: rgb(51, 255, 0);
}
#checkbox {
color: blue;
}
Now, design your interface to look more professional than mine.
You can share your new codes in the comments section below and compare with others.
Have a good coding career.
