HTML Inputs Element: The ears and eyes

While working on a project I was thinking about how important the input tag and form element are in the world of development. Since this is a blog I was trying to find a catchy or charming phrase to describe, the best I could come up with is that input fields are sort of like the ears and eyes that take in details that an end user provides (I guess that would make JavaScript the brain).

Inputs simply give us a way to allow applications to take in information from the end user to store (POST) and or manipulate (GET, PUT, DELETE). Input elements are placed inside a form element to collect inputs. Input elements use different attributes to define and create rules for the input.

Attributes

Name

You should always add a name attribute to inputs. The type is defined inside the input tag using <input name=” ”>. The name attribute is used to reference elements in JavaScript.

Type

The input type is useful because they define the input field and create rules based on the type. The type is defined inside the input tag using <input type=” ”>. Some common used input types are text, submit and checkbox.

The most common input type is text, it is the default type if none is assigned and allows a simple text field.

Date input type provides a field that requires date format. The default value inside the field is “mm/dd/yyyy” to require user to enter correct date format.

The email input type provides a field that requires text in email format.

The input type checkbox is shown as a square box that is ticked (checked) when activated. An additional attribute of “checked” or “unchecked” can be assigned to a checkbox to force the box to be checked when the page loads. The default is unchecked.

The submit input type creates a submit button that is used to submit or send the form info. The default text inside the submit button is “submit”.

See the following code below of an input form:

<form>
    <input type="text" name="name" placeholder="name"/><br>
    <input type ="date" name="birthdate"/><br>
    <input type="email" name="email" placeholder="name@email.com"/><br>
    Sign me up for email updates<input type="checkbox" name="subscribe"  value="Subscriber" checked/><br>
    <input type ="submit" value="Submit">
</form>

Other

Inputs can be further enhanced using other attributes. Attributes can set rules for inputs and assist with user experience. Common attributes value and placeholder add default text to the input field. Placeholder provides the user a hint of the requested input while value stipulates an input value provided.

Below is shows the form on the page: