HTML Inputs Element: The ears and eyes
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.
You should always add a name attribute to inputs. The type is defined inside the input tag using
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="email@example.com"/><br> Sign me up for email updates<input type="checkbox" name="subscribe" value="Subscriber" checked/><br> <input type ="submit" value="Submit"> </form>
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.
Stay tuned for future discussions on how to take in using GET, POST, PUT and DELETE methods....