← Back to Lessons
Edit on Github

Understanding HTML Input HTML Text Area and Forms...

HTML Forms

This lesson is very easy to understand – but it is essential in that in this new knowledge, all of the interactivity of the internet will be relayed. There are a few additional HTML tags that we need to discuss before finishing the Pre-Work: they are the first possible ways of interaction that were introduced in HTML: The Inputs and Forms.

Like always, let’s compare our website with an MS Word document…At some point scientists needed to create forms just like the ones we fill out when we pay our taxes: with blank spaces available for the user to fill with their Name, Last Name, Date of Birth, etc.

html textarea html input

The elements that the user fills in a form are called <input> and they always have to be wrapped inside of a <form> tag. You can also use all the other HTML tags we learned in the previous lessons without any problems.

Here is an example of a simple form in HTML:

Click to open demo in a new window

The following is a list of all the possible elements we can use to receive any input from the user:

NameDeclarationDescription
Textpython><input type="text">The text input is meant to receive any small string of characters such as: Username, Name, Last Name, Date of birth, etc.
python><input type="text" name="Name" />name="comments"><textarea/>
Textareapython><textarea>The textarea is ideal for long text inputs. Its main difference from the text input is its ability to allow for multiple lines.
python><textarea name="comments"><textarea/>
Passwordpython><input type="password" />This is just like an input type="text" but with the only difference that the characters are hidden like bullets – the user cannot see what they are typing.
python><input type="password" name="password" />
Radiobuttonpython><input type="radio">Allows the user to select only one of all the inputs with the same name.
python><input type="radio" name="color" value="red" />
python><input type="radio" name="color" value="green" />
Checkboxpython><input type="check">You have to use brackets in the name of the input to allow the user to select multiple options at the same time.
python><input type="check" name="color[]" value="green" />
python><input type="check" name="color[]" value="blue" />
Filepython><input type="file">This is the only way to work with files. Eg: It’s what websites use when they ask you to upload a picture.
python><input type="file" name="photo" value="" />
Submit Buttonpython><input type="submit">When the form is ready to be sent, the user presses this "submit" button and everything is then sent to the server for processing.
python><input type="submit" value="Send Form" />
Selectpython><select>Asks the user to pick one or more elements from a list of options.
python><select name="color" /> <option value="red">Red </option> <option value="yellow">Yellow</option> <select />

Input Attributes

Just like any other HTML tag, the input tags have several attributes that can be set to describe their behavior in more specific ways:

VALUE: You can specify a default value that the input should have before it starts getting filled by the user:

<input type="text" name="firstname" value="John">

READ ONLY: Determines if the user is allowed to change the value of the input.

<input type="text" name="firstname" value="John" readonly>

DISABLED: Determines if the input is going to be gray and read-only. The disabled inputs are not sent to the backend – they act as if they never existed.

<input type="text" name="firstname" value="John" disabled>

SIZE: The maximum number of characters allowed for that input.

<input type="text" name="firstname" value="John" size="40">

The forms METHOD and ACTION

The two most important attributes that need to be set into the <form> tag are action and method:

Action: Is the URL where the data collected from the form is going to be sent.

Method: Can be either "POST" or "GET" – the main differences will be: (1) How the collected data is going to be sent to the destination page once we arrive there and (2) How the form data is submitted to the server.

Using method GETUsing method POST
All form data is encoded into the URL. This means that it will append all the information of the form to the end of the destination URL, for example: http://www.mydestinationurl.com?input_name1=value1&input_name2&value2….The data will be hidden from the end-user. The URL will remain as it was defined in the "action" attribute and only a developer will be able to request the form information.

☝ If you are going to use the python><input type="file"> the only method supported is POST.


Subscribe for more!


COMPANY

ABOUT

CONTACT

MEDIA KIT

SOCIAL & LIVE LEARNING

The most efficient way to learn: Join a cohort with classmates like yourself, live streamings, coding jam sessions, live mentorships with real experts and keep the motivation.

INTRO TO CODING

From zero to getting paid as a developer, learn the skills of the present and future. Boost your professional career and get hired by a tech company.

DATA SCIENCE

Start a career in data science and analytics. A hands-on approach with interactive exercises, chat support, and access to mentorships.

30DAYSOFGEEKCODING

Keep your motivation with this 30 day challenge. Join hundreds of other developers coding a little every day.

A.I. & MACHINE LEARNING

Start with Python and Data Science, Machine Learning, Deep Learning and maintaining a production environment in A.I.


©4Geeks Academy LLC 2019

Privacy policies


Cookies policies


Terms & Conditions