Skip to content

Instantly share code, notes, and snippets.

@xsky13

xsky13/index.html

Last active Jul 30, 2020
Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Types of inputs</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<h1 class="text-center">Types of inputs</h1>
<table class="table table-hover d-block m-auto">
<thead>
<tr>
<th>Tag attribute(type)</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code">text</span></td>
<td>Will accept any kind of text/numerical values</td>
<td><input type="text" class="form-control" value="text"></td>
</tr>
<tr>
<td><span class="code">email</span></td>
<td>Specifies email input, but will accept other characters</td>
<td><input type="email" class="form-control" value="email@gmail.com"></td>
</tr>
<tr>
<td><span class="code">number</span></td>
<td>Will only accept numerical values</td>
<td><input type="number" class="form-control" value="2020"></td>
</tr>
<tr>
<td><span class="code">password</span></td>
<td>Defines a password field. Since the password should be encrypted, the value will display in bullet form</td>
<td><input type="password" class="form-control" value="password"></td>
</tr>
<tr>
<td><span class="code">Submit</span></td>
<td>This is an input used to submit form data</td>
<td><input type="submit" class="form-control"></td>
</tr>
<tr>
<td><span class="code">Radio</span></td>
<td>The radio input lets you select from only one from a number of options </td>
<td>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Female
</label>
</div>
</td>
</tr>
<tr>
<td><span class="code">Reset</span></td>
<td>After replacing input values, this input will reset the typed-in values
for the previously written ones</td>
<td>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" class="form-control"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe" class="form-control"><br>
<input type="reset" class="form-control">
</form>
</td>
</tr>
<tr>
<td><span class="code">Checkbpx</span></td>
<td>Here, you can select any number of the given options</td>
<td>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="optradio">I have a car
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="optradio">I have a bike
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="optradio">I have a motorcycle
</label>
</div>
</td>
</tr>
<tr>
<td><span class="code">Color</span></td>
<td>This input allows you to pick colors</td>
<td><input type="color" class="form-control"></td>
</tr>
<tr>
<td><span class="code">Date</span></td>
<td>Will allow to pick a date for you</td>
<td><input type="date" class="form-control"></td>
</tr>
<tr>
<td><span class="code">File</span></td>
<td>Will allow to pick a file from your file explorer</td>
<td><input type="file" class="form-control"></td>
</tr>
<tr>
<td><span class="code">Range</span></td>
<td>This input is used for entering a number whose exact value is not important (like a slider control). The default value is 0 to 100, but you can set restrictions with the min, max, and step attributes</td>
<td><input type="range" class="form-control"></td>
</tr>
</tbody>
</table>
<p class="text-center">These are not all of the input types. To see the whole list, vist <a href="https://www.w3schools.com/html/html_form_input_types.asp">this </a>page about input types</p>
</body>
</html>
.code {
background-color:rgb(223, 223, 223);
color: rgb(232, 43, 43);
font-family: monospace;
font-weight: bold;
border-radius: 5px;
padding: 5px;
}
.table {
width: 85% !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.