HTML Forms

HTML forms collect user input with the HTML form, which defines an HTML form:
HTML form elements include different types of input elements, checkboxes, radio buttons, submit buttons, and more.

The most important one, the input element has many types.

Type and Description
text - Defines normal one line text input
textarea - Defines text input with many rows (lines of text) and columns
select - Defines drop-down box with multiple options
radio - Defines radio button input (for selecting one of many choices)
checkbox - Defines checkbox input (for selecting one or more choices)
hidden - Defines an invisible to a user field that usually provides some additional hint to the server side helping to process input data
submit - Defines a submit button (for submitting the form)

Besides the type each element usually has the name and value. On the server side a program can retrieve the value by querying for the name of the element.

Text input field might also have the size attribute to define how big should be a visible text field. The size is provided in number of characters, but it is in no way limit the actual number of characters that can be provided by a user.

The form with the input values will be posted (submitted) to the server side to a specific program, which expects such submission.
The action element of the form defines where data will be submitted.
For example, action=http://ITofTheFuture.com/BASE/Lookup
The form can be submitted with one of HTTP methods: GET, POST, UPDATE, and DELETE. While these methods reflect the possible cases (which are actually used by the RESTful services developers) in your HTML the form is usually submitted with the POST method.
Example





Login: 

Password:

Another Example will send request parameters to the web site with the action=echo.
This action is implemented at the ITU and mirror sites for your convenience to see the parameters you send with the request.





Indicate your sex: Male

Female



Select the number of years of experience:

Was it clear so far?

An HTML form can be used to upload a file to a server.
In this case besides the action and method the form will include the attribute enctype="multipart/form-data" and the input type for file upload is file.
You will see a usual upload interface that allows a user to select a file.
To actually upload a file to a specific server you will need special privileges.
You will also need to specify the directory to land (store) the uploaded file.
The form for File Upload looks like that:

enctype="multipart/form-data" method="post">

Note: filename is a name you assign to the field as you like; under this name the file should be retrieved on the server side

Send e-mail from a form

An HTML form can be used to send an email. In this case the action attribute should target an email address where email should be sent.



Name: 



E-mail: 



The content of your email:

Assignments:
1. Create web pages with all types of HTML forms provided here.
Check in https://www.w3schools.com/ how to replace text field in the last example with the textarea.
2. Propose 2 good QnAs.

<form action="http://ITofTheFuture.com/BASE/Lookup" method="post"> <br/><input type="hidden" name="action" value="login"> <br/>Login: <input type="text" name="email" size=20 value=""> <br/>Password: <input type="password" name="psw" size=20 value=""> <br/><input type=submit name=submit value="Login"> <br/></form>

<form action="http://ITofTheFuture.com/BASE/Lookup" method="post"> <br/><input type="hidden" name="action" value="echo"> <br/>Indicate your sex: <input type="radio" name="sex" value="male" checked>Male <br/><input type="radio" name="sex" value="female">Female <br/> <br/>Select the number of years of experience: <br/><select name="experience"> <br/><option value="3">1-3</option> <br/><option value="10">4-10</option> <br/><option value="11">11+</option> <br/></select> <br/><input type="submit" name="submit" value="SUBMIT"> <br/></form>

<form action="http://ITofTheFuture.com/BASE/Lookup" <br/>enctype="multipart/form-data" method="post"> <br/><input type="file" name="filename" size="20"> <br/><input type="submit" name="submit" value="SUBMIT"></form>

<form action="mailto:email@server.com" method="post" enctype="text/plain"> <br/>Name: <input type="text" name="name" value="your name"> <br/> <br/>E-mail: <input type="text" name="mail" value="your email"> <br/> <br/>The content of your email: <br/> <br/><input type="text" name="content" value="Place your content here!"> <br/><input type="submit" name="submit" value="SUBMIT"></form>