HTML Forms
HTML Forms
DCIS1204
SEMISTER TWO
YEAR ONE
HTML Forms
HTML Forms are required to collect different kind of data from the users inputs, such as contact
details like name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting
items, etc. and submitting this form to a web server for further processing.
The <form> tag is used to create an HTML form.
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
HTML Forms
Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes
HTML Forms
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable button
using <input>tag by setting its type attribute to button. The type attribute can take the following
values.
HTML Forms
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>
HTML Forms
Hidden Form Controls: Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside
the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click
next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed
current page.
Example
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
HTML Forms