{"id":78,"date":"2018-07-12T08:42:33","date_gmt":"2018-07-12T08:42:33","guid":{"rendered":"http:\/\/itp9.epgpbooks.inflibnet.ac.in\/?post_type=chapter&p=78"},"modified":"2018-12-07T09:11:10","modified_gmt":"2018-12-07T09:11:10","slug":"html-form","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/itp9\/chapter\/html-form\/","title":{"rendered":"HTML Form"},"content":{"raw":"
\"epgp<\/a>\r\n<\/span><\/div>\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n

A form is a container that contains one or more controls like text boxes, radio buttons, check boxes that can receive data.To create a form <form> tag is used. The most useful attributes of form tag are: method and action.When a form is submitted to the server for processing, the data in the controls is sent along with HTTP request.Method attribute specifies which HTTP method is used to submit the form data. The value a method attribute can set is get or post. By default it is get.When get method is used, the data is sent for processing to server by control is displayed as part of the URL. The post method does not show data as part of the URL when data is sent for processing to the server.The action method is used to specify the URL of the page or server-side script that will process the data in a form.<\/p>\r\n \r\n

The <input> tag is used to specify the input object types.<\/p>\r\n

The type attribute of <input> tag is used to specify the type of input object.<\/p>\r\n

The following table shows various input attributes.<\/p>\r\n \r\n\r\n\"\"\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0Following code snippet shows to create textboxes for username and password.\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nUsername:\r\n\r\n<input type=\"text\" name=\"uname\">\r\n\r\n<br>\r\n\r\nPassword:\r\n\r\n<input type=\"password\" name=\"pwd\">\r\n\r\n<br>\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n

Name attribute is the most common attribute for all control except submit and reset. This name value is used for writing code.<\/p>\r\n \r\n

The text type can have additional size, maxlength and value attributes.<\/p>\r\n \r\n

Size attributes define the length of textbox for having the no. of characters in a textbox.<\/p>\r\n \r\n

Maxlength determines the maximum length of textbox having maximum no. of characters in a textbox.<\/p>\r\n \r\n

Value attributes displays the content in textbox when form loads on to browser.<\/p>\r\n \r\n\r\nFollowing code snippet shows radio button use.\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nGender:\r\n\r\n<input type=\"radio\" name=\"gender\" value=\"Male\" checked>Male\r\n\r\n<input type=\"radio\" name=\"gender\" value=\"Female\">Female\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n<\/div>\r\n

\r\n

\u00a0 \u00a0The value attribute is submitted to the server when form is processed.<\/p>\r\n \r\n

The checked attribute checked the value. It is a Boolean attribute.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nSkills:\r\n

<input type=\"checkbox\" name=\"skills\" value=\"ASP.NET\">ASP.NET <input type=\"checkbox\" name=\"skills\"\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0value=\"Perl\">Perl<\/p>\r\n<input type=\"checkbox\" name=\"skills\" value=\"Java\">Java\r\n\r\n<input type=\"checkbox\" name=\"skills\" value=\"Php\">Php\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\"\"\r\n\r\n \r\n

The submit button submitted data for the processing and reset button reset the controls.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\n<input type=\"submit\" name=\"submit\" value=\"Next\">\r\n\r\n<input type=\"reset\" name=\"reset\" value=\"Reset\">\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n \r\n\r\nThe following code snippet shows use of button type.\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\n<input type=\"button\" name=\"calculate\" value=\"Calculate\">\r\n\r\n<input type=\"reset\" name=\"reset\" value=\"Reset\">\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\nThe following code snippet shows use of image type.\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n

<input type=\"image\" name=\"Agree\" src=\"Autumn Leaves.jpg\" width=\"30\" height=\"30\"<\/p>\r\nalt=\"click me\">\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n

The following code shows use of file type:<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nUse the browse button to select file:\r\n\r\n<input type=\"file\" name=\"upload\" size=\"30\">\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nSELECT\r\n\r\n \r\n

The <select> tag allows user to select a single or more value from the available values.<\/p>\r\n \r\n

The following code allows to select only one values from the available option.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nHighest Education Qualification:\r\n\r\n<select name=\"Qualification\">\r\n\r\n<option>Ph.D.<\/option>\r\n\r\n<option>M.Sc.<\/option>\r\n\r\n<option>B.Sc.<\/option><\/span>\r\n\r\n<option>HSC<\/option><\/span>\r\n\r\n<option>SSC<\/option><\/span>\r\n\r\n<\/select><\/span>\r\n\r\n<\/form><\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n\"\"\r\n\r\n \r\n

To select multiple values from the available options set the multiple attribute of select tag.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nJob location preferences:\r\n\r\n<br>\r\n\r\n<select name=\"location\" multiple size=\"5\">\r\n\r\n<option>Pune<\/option>\r\n\r\n<option>Bangalore<\/option>\r\n\r\n<option>Noida<\/option>\r\n\r\n<option>chennai<\/option>\r\n\r\n<option>Ahmedabad<\/option>\r\n\r\n<option>Mumbai<\/option>\r\n\r\n<option>Calcutta<\/option>\r\n\r\n<option>Delhi<\/option>\r\n\r\n<\/select>\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n

The <textarea> tag make a large area for enter user input.<\/span><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 <html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nAddress:\r\n\r\n<br>\r\n\r\n<textarea name=\"address\" rows=\"5\" cols=\"50\">\r\n\r\n<\/textarea>\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\"\"\r\n\r\n \r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<form method=\"post\">\r\n\r\nUsername:\r\n\r\n<input type=\"text\" name=\"uname\">\r\n\r\n<br>\r\n\r\nPassword:\r\n\r\n<input type=\"password\" name=\"pwd\">\r\n\r\n<br>\r\n\r\nAddress:\r\n\r\n<br>\r\n\r\n<textarea name=\"address\" rows=\"5\" cols=\"50\">\r\n\r\n<\/textarea>\r\n\r\n<br>\r\n\r\nGender:\r\n

<input type=\"radio\" name=\"gender\" value=\"Male\" checked>Male<\/p>\r\n

<input type=\"radio\" name=\"gender\" value=\"Female\">Female<\/p>\r\n

<br><\/p>\r\n

Skills:<\/p>\r\n

<input type=\"checkbox\" name=\"skills\" value=\"ASP.NET\">ASP.NET <input type=\"checkbox\" name=\"skills\"\u00a0 value=\"Perl\">Perl<\/p>\r\n

<input type=\"checkbox\" name=\"skills\" value=\"Java\">Java <input type=\"checkbox\" name=\"skills\"\u00a0 \u00a0 value=\"Php\">Php <br><\/p>\r\nHighest Education Qualification:\r\n\r\n<select name=\"Qualification\">\r\n\r\n<option>Ph.D.<\/option><\/span>\r\n\r\n<option>M.Sc.<\/option><\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n<option>B.Sc.<\/option>\r\n\r\n<option>HSC<\/option>\r\n\r\n<option>SSC<\/option>\r\n\r\n<\/select>\r\n\r\n<br>\r\n\r\nJob location preferences:\r\n\r\n<br>\r\n\r\n<select name=\"location\" multiple size=\"5\">\r\n\r\n<option>Pune<\/option>\r\n\r\n<option>Bangalore<\/option>\r\n\r\n<option>Noida<\/option>\r\n\r\n<option>chennai<\/option>\r\n\r\n<option>Ahmedabad<\/option>\r\n\r\n<option>Mumbai<\/option>\r\n\r\n<option>Calcutta<\/option>\r\n\r\n<option>Delhi<\/option>\r\n\r\n<\/select>\r\n\r\n<br><br>\r\n

<input type=\"submit\" name=\"submit\" value=\"Next\"> <input type=\"reset\" name=\"reset\" value=\"Reset\"><\/p>\r\n<\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\"\"\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n

To display form for good look a form table tag can be used.<\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 CSS [Cascading Style Sheet]\r\n\r\n \r\n

Cascading style sheets are used to display web pages by specifying the fonts, colors, spacing and layout of the pages.<\/p>\r\n \r\n

A CSS file consists of rule sets. The rule set is a combination of selector and declaration block.<\/p>\r\n \r\n

The selector is identifier while declaration is made of property and value.<\/p>\r\n \r\n\r\n \r\n\r\nSelector\r\n\r\n \r\n\r\nh1\r\n\r\n{\r\n\r\nColor: red;\u00a0 \u00a0\u00a0declaration\r\n\r\n}\r\n\r\n \r\n\r\nProperty\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value\r\n\r\n \r\n\r\n \r\n\r\nCSS rule set can be a HTML element like h1, ID or class.\r\n\r\nID identifier begin with # symbol.\r\n\r\nClass identifier has . prefix and then class-name.\r\n\r\n \r\n\r\nHTML element:\r\n\r\nh1\r\n\r\n{\r\n\r\n \r\n\r\nColor: red;\r\n\r\n}\r\n\r\n \r\n\r\nID\r\n\r\n#footer\r\n\r\n{\r\n\r\nFont-size: 50%;\r\n\r\nText-align: left;\r\n\r\n}\r\n\r\n \r\n\r\nClass\r\n\r\n.menu_color\r\n\r\n{\r\n\r\nColor:silver;\r\n\r\n}\r\n\r\n \r\n\r\nThe extension of cascading style sheet is .css\r\n\r\n \r\n\r\nThere are 3 types of style sheets.\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 1. External\r\n\r\n2. Internal and\r\n\r\n3. Embedded\r\n\r\n \r\n\r\nExternal style sheet is a style sheet which is add in the html by using link tag in HTML.\r\n\r\n \r\n\r\nLet us create an external style sheet in notepad.\r\n\r\n \r\n\r\nbody\r\n\r\n{\r\n\r\nbackground-color:Red;\r\n\r\n}\r\n\r\n \r\n\r\nSave this file as styles.css.\r\n\r\n \r\n\r\nNow to use this style sheet in a web page include it in <head> tag of HTML.\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title> CSS Example <\/title>\r\n\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"Styles.css\">\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\nThis is body text.\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n<\/div>\r\n
\r\n\r\n\u00a0 \u00a0Below code is a example of internal stylesheet.\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title> CSS Example <\/title>\r\n\r\n<style type=\"text\/css\">\r\n\r\nbody\r\n\r\n{\r\n\r\ncolor:green;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\nThis is body text.\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\"\"\r\n\r\n \r\n\r\nEmbedded style sheet is shown in below code.\r\n\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title> CSS Example <\/title>\r\n\r\n<\/head><\/span>\r\n\r\n<<\/span>body style=\"background-color:green; font-size:24pt;\"><\/span>\r\n\r\nThis is body text.<\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n\"\"\r\n\r\n\r\n\r\n\r\n
you can view video on HTML Form<\/strong><\/td>\r\n\"\"<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\nReferences:<\/strong>\r\n