HTML <input>

11th February 2020 | Christopher Pisani

The HTML element <input> is the key for inputs within a form in an HTML document, with multiple combinations of input types, always using the same element. The <input> element can be used in a large variety of user inputs, from a radio button selection, tick boxes, image uploads, color picker and form controls.

We will show the variety of user inputs and types the element <input> can handle in the examples below and will use the <form> element to show results when input detects any user filled data.

For this input example, as data is sensitive, a method of POST is recommended

<form method="POST" action="/pages/results.php">

    <label for="user">Username</label>
    <input type="text" id="user" name="user" required
       minlength="4" maxlength="25" size="10">

    <br>

     <label for="pass">Password</label>
    <input type="password" id="pass" name="pass" required
       minlength="4" maxlength="25" size="10">

    <br>

    <input type="reset">
    <input type="submit">

</form>

For this Radio example, we are using GET method as data is not sensitive

<!-- Note that we used 'checked' on the second input, to have a suggested fruit -->
<form method="GET" action="/pages/results.php">
    
    <h1> Select 1 fruit from selection</h1>
    
    <input type="radio" id="app" name="fruit" value="Apple">
    <label for="app">Apple</label>

    <br>

    <input type="radio" id="ban" name="fruit" value="Banana" checked >
    <label for="ban">Banana</label>

    <br>

    <input type="radio" id="ora" name="fruit" value="Orange">
    <label for="ora">Orange</label>

    <br><br>

    <input type="reset">
    <input type="submit">

</form>

For this Check box example, we are using GET method as data is not sensitive

<!-- In this example, you will note a [ ] after the name. This is used, to have an array of the selection, as to be easier to process in the back end of our servers -->
<form method="GET" action="/pages/results.php">
    
    <h1> Select list of fruits from selection</h1>
    
    <input type="checkbox" id="app" name="fruit[]" value="Apple">
    <label for="app">Apple</label>

    <br>

    <input type="checkbox" id="ban" name="fruit[]" value="Banana" >
    <label for="ban">Banana</label>

    <br>

    <input type="checkbox" id="ora" name="fruit[]" value="Orange">
    <label for="ora">Orange</label>

    <br><br>

    <input type="reset">
    <input type="submit">

</form>

The colour picker

<form method="GET" action="/pages/results.php">

    <h1>Choose your colour</h1>

    <input type="color" name="color" />

    <input type="reset">
    <input type="submit">

</form>

Uploading a file with the input element

<form  method="post" action="/pages/results.php">
  <label for="myfile">Select file :</label>
  <input type="file" id="myfile" name="myfile">
  <input type="submit">
</form>

An input can be set to number and an add and deduct bar is added to the input field

<form  method="post" action="/pages/results.php">
  <label for="data">Select a number :</label>
  <input type="number" id="data" name="data">
  <input type="submit">
</form>

The range slider example

<!-- Note: The script used is just for testing output purposes -->
<h2>Current Volume <span id="volume">30</span></h2>
<form action="/pages/results.php">
  <label for="vol">Volume :</label>
  <input type="range" id="vol" name="vol" min="0" max="100" value="30" onchange="result(this.value)">
  <input type="submit">
</form>

<script>
    function result(x) {
        document.getElementById('volume').innerHTML = x;
    }
</script>

Available Attributes

Attribute	Values	Functionality
checked		A pre selected option for a radio or check box input
min	numeric value	Minimum number(if used for type="number" or minimum charchters(if used for type="text")
max	numeric value	Maximum number(if used for type="number" or maximum charchters(if used for type="text")
step	numeric value	The interval between counts
type	button	Defines a button
type	checkbox	Defines a checkbox
type	color	Defines a colour picker
type	date	Defines a date control
type	datetime-local	Defines a date and time control
type	email	Defines a field for e-mail address
type	file	Defines a field and a Browse button for uploading files
type	hidden	Defines a hidden input
type	image	Defines an image as the submit button
type	month	Defines a month and year control
type	number	Defines a field for entering a number
type	password	Defines a password field
type	radio	Defines a radio button selection
type	range	Defines a slider range control
type	reset	Defines a reset button
type	search	Defines a text field for entering a search query
type	submit	Defines a submit button
type	tel	Defines a field for entering a telephone number
type	text	Default. Defines a single-line text field
type	time	Defines a control for entering a time (no timezone)
type	url	Defines a field for entering a URL
type	week	Defines a week and year control (no timezone)
value	text	The pre defined value for the input