Forms

Forms can have different types of controls to collect the input-data from users, which are listed below and shown in Table 5:

Text input
Text area
Radio button
Checkbox
Select box
File select
Buttons
Submit and reset buttons
Hidden input

Table 5: List of control inputs and their attributes
Control	Attributes	Values	Description
Input : text	type	text, password
	value	user-defined	initial value in the area
	name	user-defined	name send to server
	size	numeric value	width of the text area
	maxlength	numeric value	maximum number of characters
Input : radio	type	radio
	name	user-defined	name send to server
	value	user-defined value	value of the button if selected
	checked	maxlength	check the button by default
Input : check box	type	checkbox
	name	user-defined	name send to server
	value	user-defined value	value of the button if selected
	checked	maxlength	check the box by default
Input : button	type	button	trigger client side script
		submit	submit the form and run ‘action’
		reset	reset form
		image	create image button
	method	get, post	get or post method
	action	user-defined	action to perform on submit
Input : hidden	type	hidden	will not display on html, but can be used for sending information to server
Selection box	name	user-defined	name send to server
	size	numeric value	enables scroll (default dropdown)
	multiple	numeric value	select multiple items
	value	user-defined value	value of the item if selected
	selected		select item by default
Text area	rows, cols	numeric value	number of rows and colums
	name	user-defined	name send to server

Below are the exmaple of the control inputs described in Table 5 above.


		   
			1 <!-- Forms -->

			2 <form>

			3 <h4>Text input </h4>

			4 Name : <input type="text" name="user_name" size="4" value="e.g. meher21" maxlength="10"><br>

			5 Password : <input type="password" name="user_pass" ><br>

			6 <h4> Radio button: name should be same</h4>

			7 <input type="radio" name="r_gender"> Male

			8 <input type="radio" name="r_gender"> Female

			9 <input type="radio" name="r_gender" checked> Infant

			10 <h4> Check box : name should be different</h4>

			11 <input type="checkbox" name="c_male" checked> Male

			12 <input type="checkbox" name="c_female"> Female

			13 <input type="checkbox" name="c_infant"> Infant

			14 <h4> Select box : drop-down</h4>

			15 <select name="s_box">

			16 <option value="s_male">Male</option>

			17 <option value="s_female" selected>Female</option>

			18 <option value="s_infant">Infant</option>

			19 </select>

			20 <h4> Select box : scroll</h4>

			21 <select name="s_box" size="4" multiple>

			22 <option value="s_male" selected>Male</option>

			23 <option value="s_female" selected>Female</option>

			24 <option value="s_infant">Infant 1</option>

			25 <option value="s_infant" selected>Infant 2</option>

			26 <option value="s_infant">Infant 3</option>

			27 <option value="s_infant">Infant 4</option>

			28 </select>

			29 <h4> Text area</h4>

			30 <textarea rows="10" cols="80" name="txt_area">Initial Text

			31 x = 2

			32 y = 3

			33 </textarea> <!-- formatting work as pre -->

			34 </form>

Below is the code which shows the working of various buttons.

Note: method and action are defined in this form, which will be triggered on ‘submit’ button. Lastly, ‘hidden’ option is used in this example.


		   
 			1<form method="get|post" action="jquery.html">

			2 <h4> Buttons and Hidden</h4>

			3

			4 Name : <input type="text" name="user_name" size="4" value="Meher" maxlength="16"><br>

			5 Password : <input type="password" name="user_pass" ><br>

			6

			7 <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>

			8 <input type="submit" name="b_submit" value="Go to jQuery"/>

			9 <input type="reset" name="b_reset" value="Reset"/><br>

			10

			11 <input type="hidden" name="h_data" value="html_tutorial">

			12</form>

Previous Next