{"id":7080,"date":"2013-01-28T06:21:19","date_gmt":"2013-01-28T06:21:19","guid":{"rendered":"http:\/\/vskills.in\/certification\/tutorial\/?p=7080"},"modified":"2024-04-12T14:13:37","modified_gmt":"2024-04-12T08:43:37","slug":"formatting-forms-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/","title":{"rendered":"Formatting Forms"},"content":{"rendered":"
\n

Formatting Forms<\/strong><\/h4>\n

Few formatting techniques are illustrated for formatting forms.\u00a0<\/strong><\/p>\n

Tab Order and Keyboard Shortcuts<\/strong><\/p>\n

As illustrated earlier, for changing the tab order and adding keyboard shortcuts for links is accomplished using the tabindex and accesskey attributes. Even input controls can be formatted by these attributes in a form.<\/p>\n

Grouping Controls<\/strong><\/p>\n

The <fieldset> tag groups sets of labels and controls by enclosing the controls in its opening and closing tags. In most browsers the <fieldset> tag adds boxes around each such controls which are enclosed in it and place the caption with the <legend> tag in the outline of the box as a headline as shown<\/p>\n\n\n\n\n\n
\n

HTML code<\/strong><\/p>\n<\/td>\n

\n

Browser output<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/thead>\n

<form action=\u201c\/process.php\u201d method=\u201cget\u201d><\/p>\n

<fieldset><\/p>\n

<legend>Personal Details<\/legend><\/p>\n

<p>Name <input type=”text” name=”HighSchool” \/><br \/><\/p>\n

Address: <input type=”text” name=”College” \/><\/p><\/p>\n

<\/fieldset><\/p>\n

<fieldset><\/p>\n

<legend>Education<\/legend><\/p>\n

<p>Matriculation <input type=”text” name=”CurrentJob” \/><br \/><\/p>\n

Sr. Secondary <input type=”text” name=”PreviousJob1″ \/><br \/><\/p>\n

Graduation <input type=”text” name=”PreviousJob2″ \/><\/p><\/p>\n

<\/fieldset><\/p>\n

<\/form><\/td>\n

\u00a0\"Formatting<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Tables<\/strong><\/p>\n

Usually the text fields are scattered in the web page. All the text fields and controls can be lined up in a column by putting them in a table where in each individual element is place in its own cell in the table. Label for each control is placed in a cell before it.<\/p>\n

Thus, getting a uniform looking form by using a table as all the controls line up vertically irrespective of their text length as shown in the example, with and without a table<\/p>\n\n\n\n
\n

HTML code<\/strong><\/p>\n

<form action=\u201c\/process.php\u201d method=\u201cget\u201d><\/p>\n

Without a table<br \/><\/p>\n

Name <input type=”text” name=”FirstName” \/><br \/><\/p>\n

Address<input type=”text” name=”AddressLine1″ \/><\/p>\n

<\/form><\/p>\n

<form action=\u201c\/process.php\u201d method=\u201cget\u201d><\/p>\n

<table> In a table<\/p>\n

<tr><td>Name<\/td><\/p>\n

<td><input type=”text” name=”FirstName” \/><\/td><\/p>\n

<\/tr><tr><td>Address<\/td><\/p>\n

<td><input type=”text” name=”AddressLine1″ \/><\/td><\/p>\n

<\/tr><\/table><\/form><\/td>\n

\n

Browser output<\/strong><\/p>\n

\"Formatting<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Disable Form Elements<\/strong><\/p>\n

Controls can be disabled for any input from the user by using two attributes which are<\/p>\n

readonly<\/strong> \u2013 As per its name it makes the input control as read only and value assigned to the input control cannot be changed. If user try to edit the content then an alert is displayed and no change is accepted. Its usage is shown<\/p>\n

<input type=”text” value=”VS-1027″ name=”HTML” readonly=”readonly” \/><\/p>\n

disabled<\/strong> \u2013 It is similar to readonly as it disables the input control but input controls appear in gray or faded text. They cannot be clicked and their usage is shown<\/p>\n

<input type=”text” value=”ww1234″ name=”UserName” disabled=”disabled” \/><\/p>\n

Apply for HTML5 Certification Now!!<\/h3>\n

http:\/\/www.vskills.in\/certification\/Certified-HTML5-Developer<\/a><\/p>\n

Back to Tutorial<\/strong><\/a><\/h4>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Formatting Forms Few formatting techniques are illustrated for formatting forms.\u00a0 Tab Order and Keyboard Shortcuts As illustrated earlier, for changing the tab order and adding keyboard shortcuts for links is accomplished using the tabindex and accesskey attributes. Even input controls can be formatted by these attributes in a form. Grouping Controls The <fieldset> tag groups…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[135],"tags":[2580,6768,6767,2444],"class_list":["post-7080","page","type-page","status-publish","hentry","category-html5-developer","tag-formatting-forms","tag-html5","tag-html5-developer","tag-html5-developer-certification"],"acf":[],"yoast_head":"\nFormatting Forms - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Formatting Forms - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Formatting Forms Few formatting techniques are illustrated for formatting forms.\u00a0 Tab Order and Keyboard Shortcuts As illustrated earlier, for changing the tab order and adding keyboard shortcuts for links is accomplished using the tabindex and accesskey attributes. Even input controls can be formatted by these attributes in a form. Grouping Controls The <fieldset> tag groups...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:43:37+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/\",\"name\":\"Formatting Forms - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png\",\"datePublished\":\"2013-01-28T06:21:19+00:00\",\"dateModified\":\"2024-04-12T08:43:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Formatting Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Formatting Forms - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/","og_locale":"en_US","og_type":"article","og_title":"Formatting Forms - Tutorial","og_description":"Formatting Forms Few formatting techniques are illustrated for formatting forms.\u00a0 Tab Order and Keyboard Shortcuts As illustrated earlier, for changing the tab order and adding keyboard shortcuts for links is accomplished using the tabindex and accesskey attributes. Even input controls can be formatted by these attributes in a form. Grouping Controls The <fieldset> tag groups...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:43:37+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/","name":"Formatting Forms - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png","datePublished":"2013-01-28T06:21:19+00:00","dateModified":"2024-04-12T08:43:37+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Formatting-Forms.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/formatting-forms-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Formatting Forms"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/7080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=7080"}],"version-history":[{"count":9,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/7080\/revisions"}],"predecessor-version":[{"id":126589,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/7080\/revisions\/126589"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=7080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=7080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=7080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}