Inputs Types In HTML

There are many inputs you can employ when designing HTML codes.

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.