Forms

Forms are defined using the <form> element and contain a number of form controls to collect data from the user.

 

Some of the most frequently used form attributes are:

  • name: Unique name of the form
  • action: Name of the script URL to receive the collected data
  • method: Define the method to be used to upload the collected data, generally GET or POST

Syntax:

 

<form name="userDefiend" action="formAction.php" method="POST"  >

...input elements...

</form>

 

 

IMPORTANT! Forms method GET Vs POST

 

The forms method attribute defines how to send data to the resource defined in the action attribute.

 

GET

  • Appends data into the URL as name/value pairs, and is therefore visible!
  • Should NEVER be used with sensitive data
  • The length of the URL is limited to ~2048 characters
  • Can be bookmarked
  • Remains in browser history

 

POST

  • Appends data inside body of HTTP request
  • No size limitations
  • Cannot be bookmarked
  • Do not remain in browser history

 

 

<input /> 

 

The most important form element is the <input /> element, which is used to collect user information.

 

<input /> element attributes:

  • type: Specifies the type of input control
  • name: Specifies the name part of the name/value pair sent to the server, representing each form control and the value the user entered
  • value: Specifies an initial value for the text input control that the user will see when the form loads
  • size: Specifies the width of the text-input control in terms of characters. Default is 20
  • maxlength: Specifies the maximum number of characters a user can enter into the text box

 

The <input /> element has many types:

  • Button, Submit, Reset
  • Text
  • Password (characters are masked by being shown as asterisks)
  • Radio buttons
  • Checkboxes
  • Select boxes
  • Hidden controls
  • File select boxes

 

Button, Submit, Reset

 

The input element is also used to create buttons, which are specified using the type attribute:

  • button. Specifies a button to trigger a script
  • submit. Specifies a button to submit the form
  • reset. Specifies a button to reset the form controls to their initial values
<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<form action="https://www.tech-academy.co.uk" method="get" target="_blank">
			<input type="submit" name="Submit" value="Submit" />
			<br>
			<input type="reset" value="Reset" />
			<br>
			<input type="button" value="My New Button" />
		</form>
	</body>
</html>

 

 

Text Input

 

<input type="text" />

<form action="/scripts/hello.php" method="post">
	User ID: <input type="text" name="userID"><br>
	Password: <input type="password" name="password">
	<input type="submit" value="submit" />
</form>

 

The <textarea> form element allows multi-line text to be entered.

Attributes:

  • name: Specifies the name part of the name/value pair sent to the server
  • rows: Specifies the number of rows
  • cols: Specifies the number of columns
<form action="/scripts/hello.php" method="post">
	Please use this textarea:
	<textarea rows="5" cols="50" name="description">
		Enter description here...
	</textarea>
	<input type="submit" value="submit" />
</form>

 

 

Radio buttons

 

<input type="radio" />

 

Radio buttons allows the user to select ONLY ONE of a limited number of choices, and therefore the name attribute should be set to the same value for each input choice. The optional checked attribute provides a default selection:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<form action="https://www.tech-academy.co.uk" method="get" target="_blank">
			<p>Please select your preferred bike:</p>
			<input type="radio" name="bike" value="ducati" /> Ducati
			<br>
			<input type="radio" name="bike" value="yamaha" /> Yamaha
			<br>
			<input type="radio" name="bike" value="honda" /> Honda
			<br>
			<input type="submit" value="Select Bike" />
		</form>
	</body>
</html>

 

 

Check Boxes

 

<input type="checkbox" />

 

Check boxes allow more than one selection to be made. The optional checked attribute provides a default selection:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<form action="https://www.tech-academy.co.uk" method="get" target="_blank">
			<p>Please select your preferred bike:</p>
			<input type="checkbox" name="ducati" value="ducati" /> Ducati
			<br>
			<input type="checkbox" name="yamaha" value="yamaha" checked /> Yamaha
			<br>
			<input type="checkbox" name="honda" value="honda" /> Honda
			<br>
			<input type="submit" value="Select Bike" />
		</form>
	</body>
</html>

 

 

Select Boxes

 

<select name="dropdown">

 

The <select> box is used to provide a drop down selection of choices, which are defined by its <option> elements.

 

Select attributes:

  • name: Specifies the name for the control
  • size: This Used to present a scrolling list box
  • multiple: Allows a user to select multiple items from the dropdown

Option attributes:

  • value: Value sent to the server if this option is selected
  • selected: Specifies this option should be initially selected when the page loads
  • label: An alternative way of labeling options

 

Important: remember to provide a name/value pair to the <select> element so that the value can be sent to the server!

 

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<form action="https://www.tech-academy.co.uk" method="get" target="_blank">
			<select name="dropdown">
				<option value="ducati">Ducati</option>
				<option value="yamaha">Yamaha</option>
				<option value="honda">Honda</option>
				<option value="triumph" selected>Triumph</option>
				<option value="kawasaki">Kawasaki</option>
				<option value="suzuki">Suzuki</option>
				<option value="aprilia">Aprilia</option>
			</select>
			<input type="submit" value="Submit" />
		</form>
	</body>
</html>

 

 

Hidden Controls

 

<input type="hidden" />

 

Allows values to be passed to a form without being seen in browser. Useful to pass temporary or session data between forms, or perhaps as a temporary store for information already entered by the user.

 

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<form action="https://www.tech-academy.co.uk" method="get" target="_blank" name="bikes">
			<p>A value of ducati is being sent! Look at the get data in the url</p>
			<input type="hidden" name="bikes" value="ducati" />
			<input type="submit" value="Submit" />
		</form>
	</body>
</html>

 

 

File Select Boxes

 

<input type="file">

 

Allows the user to select a file from their local machine and upload it to the server.

 

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<form action="https://www.tech-academy.co.uk" method="get" target="_blank" name="uploader" enctype="multipart/form-data">
			<input type="file" name="fileUploader" accept="image/*" />
		</form>
	</body>
</html>

Leave a Reply