News & UpdatesProgrammingWeb programming Store My Projects

HTML Tutorial – 13 – Forms I

Forms allow users to enter and submit data. They can for example be used to handle logins, order forms and user feedback. The <form> element requires two attributes: action and method. Action is the location where the form is sent to. This can be either a mailto link or a form handling script. A form handler requires server-side programming and uses the Common Gateway Interface (CGI).

The other required attribute is the sending method, which can be either get or post. Get sends the form data directly when it calls the form handler by appending the data to the URL. Post, on the other hand, sends the data to the handler in a separate transmission. Which method to use may depend on the form handler.

<form action="/cgi-bin/hello.cgi" method="post"></form>

Form controls

Any elements may be placed inside of the form element, but most importantly it may include the form controls. Most controls use the <input> element, which can create buttons, text fields and alternative choices. Almost every form control requires a name and a value to either be specified in the markup or entered by the user. These name/value pairs are what will be sent to the form handler or e-mail address.

Submit and reset buttons

Every form needs a submit button which sends the form to the handler. A form may also include a reset button for resetting the form to its initial values.

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

The default text label for a button can be changed using the value attribute.

<input type="submit" value="Send">

Custom buttons

Additionally, custom normal or image buttons can be added. However, to give them any functionality requires the use of a scripting language, such as JavaScript.

<input type="button">
<input type="image" src="btn_img.png">

Another way to make custom buttons with scripts is using the <button> element, which gives more control over how the button is displayed.

<button>label or image</button>

File input

The file input type allows the user to select a file on their computer. Attaching a file to the form data requires method=”post” and enctype=”form/multipart”.

<input type="file" name="selected_file">
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours