{"id":842,"date":"2021-12-07T11:55:44","date_gmt":"2021-12-07T11:55:44","guid":{"rendered":"https:\/\/swatilathia.wordpress.com\/?page_id=842"},"modified":"2024-07-29T04:43:02","modified_gmt":"2024-07-29T04:43:02","slug":"html-form-map-tags","status":"publish","type":"page","link":"https:\/\/swatilathia.com\/?page_id=842","title":{"rendered":"HTML Form & Map Tags"},"content":{"rendered":"\n

\n

Table of Contents<\/p>\nToggle<\/span>

HTML Form<\/a><\/li>

<input> element<\/a>

<map> Control<\/a>

<area> Control<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n

<\/span>HTML Form<\/strong><\/span><\/h2>\n\n\n\n
\n
An HTML form is a section of a document that contains controls such as text fields, numeric fields, password fields, Date & Time fields, check boxes, radio buttons, submit button, reset button, etc.<\/li>\n\n\n\n
It helps the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, date of birth, time, gender, selection menu etc.<\/li>\n\n\n\n
HTML forms are used to get the data of the user to save or store it in database<\/li>\n\n\n\n
For example: If a user want to buy some products on internet(from online sites), the user must fill the form such as name, shipping address and credit\/debit card details so that product can be sent to the given address.<\/li>\n<\/ul>\n\n\n\n
HTML Form Syntax<\/strong><\/p>\n\n\n\n
<form action=\"URL\" method=\"get or post\">\n\/\/input controls e.g. textfield, textarea, radiobutton, button \n<\/form><\/code><\/pre>\n\n\n\n\nAttributes of <Form><\/strong>\n\nName: <\/strong>The name of the form<\/li>\n\n\n\n Action: <\/strong>The URL that processes the form submission<\/li>\n\n\n\n Method: <\/strong>The HTTP method to submit the form with two possible values:<\/li>\n\n\n\n post:<\/strong> The POST method; form data sent as the request body.<\/li>\n\n\n\n get:<\/strong> The GET method; form data appended to the action URL with a ? separator.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span><input> element<\/strong><\/span><\/h2>\n\n\n\n\nThe HTML <input> element is basic form element.<\/li>\n\n\n\n It is used to create the fields which takes input from user.<\/li>\n\n\n\n There are different kinds of form fields to get different types of value from user<\/li>\n<\/ul>\n\n\n\n\nExample: text field<\/strong><\/li>\n<\/ul>\n\n\n\n<body>\u00a0\n\u00a0 <form>\u00a0\n\u00a0\u00a0\u00a0\u00a0 Enter your name\u00a0 <br>\u00a0\n\u00a0\u00a0\u00a0 <input type=\"text\" name=\"username\" value=\u201dHJDOSHI\u201d>\u00a0\n\u00a0 <\/form>\u00a0\n<\/body><\/code><\/pre>\n\n\n\n\nIn above example, we have used textfield control.<\/li>\n<\/ul>\n\n\n\n<\/span>TextField Control\u00a0<\/strong><\/span><\/h3>\n\n\n\n\nThe type=\u201dtext\u201d attribute of input tag creates textfield control also known as single line textfield control.<\/li>\n\n\n\n The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.<\/li>\n<\/ul>\n\n\n\n<form>\u00a0\n\u00a0\u00a0\u00a0 First Name: <input type=\"text\" name=\"firstname\"> <br>\u00a0\n\u00a0\u00a0\u00a0 Last Name:\u00a0 <input type=\"text\" name=\"lastname\"> <br>\u00a0\n\u00a0<\/form><\/code><\/pre>\n\n\n\n\nValue: <\/strong>It is a string that contains the current value of the text entered into the text field.<\/li>\n\n\n\n Maxlength: <\/strong>It indicates maximum number of characters the user can enter into the text field.<\/li>\n\n\n\n Minlength: <\/strong>It indicates minimum number of characters the user can enter into the text field.<\/li>\n\n\n\n Size: <\/strong>The size attribute is a numeric value indicating how many characters wide the input field should be.<\/li>\n\n\n\n The value must be a number greater than zero, and the default value is 20.<\/li>\n\n\n\n Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font<\/li>\n\n\n\n Placeholder: <\/strong>It is a string that provides a brief hint to the user as to what kind of information is expected in the field.<\/li>\n<\/ul>\n\n\n\n\nExample: <\/strong>State: <input type=\u201dtext\u201d name=\u201dstate\u201d placeholder=\u201dGujarat, Maharashtra, Rajasthan\u2026\u201d><\/li>\n<\/ul>\n\n\n\n\nMaking input required:<\/strong><\/li>\n<\/ul>\n\n\n\n\nYou can use the required attribute as an easy way of making entering a value required before form submission is allowed<\/li>\n<\/ul>\n\n\n\n<form>\nEnter Your Name:<br>\n<input type=\"text\" name=\"txtname\" required>\n<input type=submit>\n<\/form><\/code><\/pre>\n\n\n\n\nDisabled: <\/strong>It prevents the value of the element to be sent when the form is submitted.<\/li>\n<\/ul>\n\n\n\n<form>\nEnter Your Name:<br>\n<input type=\"text\" name=\"txtname\" disabled>\n<input type=submit>\n<\/form><\/code><\/pre>\n\n\n\n\nReadonly: <\/strong>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input<\/li>\n<\/ul>\n\n\n\n\n<input type=\u201dtext\u201d name=\u201dtxtname\u201d value=\u201dHJDOSHI\u201d readonly><\/li>\n<\/ul>\n\n\n\n\nTabindex:<\/strong> It is a global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation. It has integer value.<\/li>\n<\/ul>\n\n\n\n<input type=\u201dtext\u201d tabindex=2><br>\n<input type=\u201dtext\u201d tabindex=1><br>\n<input type=\u201dtext\u201d tabindex=4><br>\n<input type=\u201dtext\u201d tabindex=3><br><\/code><\/pre>\n\n\n\n\nAccesskey: <\/strong>It is a short cut to access any control with the use of \u201calt\u201d + other alphabet key.<\/li>\n\n\n\n <input type=\u201dtext\u201d accesskey=\u201da\u201d><br><\/li>\n\n\n\n Press alt+a to directly move to the textbox control.<\/li>\n\n\n\n Title: <\/strong>It is a global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to.<\/li>\n\n\n\n Name : <input type=\u201dtext\u201d title=\u201dWrite Your Name Here\u201d><br><\/li>\n\n\n\n Autofocus:<\/strong> It instructs the browser to set the focus to this control when the document has finished loading<\/li>\n\n\n\n Name : <input type=\u201dtext\u201d name=\u201dtxt1\u201d autofocus><br><\/li>\n<\/ul>\n\n\n\n<\/span>Password Field Control<\/strong><\/span><\/h3>\n\n\n\n\n<input> elements of type password provide a way for the user to securely enter a password.<\/li>\n\n\n\n The password is not visible to the user in password field control.<\/li>\n<\/ul>\n\n\n\n<form>\u00a0\n\u00a0\u00a0\u00a0 Enter Password:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"password\" name=\"password\">\n<\/form><\/code><\/pre>\n\n\n\n\nValue: <\/strong>The value attribute contains a string whose value is the current contents of the text editing control being used to enter the password.<\/li>\n\n\n\n Maxlength: <\/strong>The maximum number of characters the user can enter into the password field<\/li>\n\n\n\n Minlength: <\/strong>The minimum number of characters the user can enter into the password field<\/li>\n\n\n\n Size: <\/strong>The size attribute is a numeric value indicating how many characters wide the input field should be.<\/li>\n\n\n\n Placeholder: <\/strong>It is a string that provides a brief hint to the user as to what kind of information is expected in the field.<\/li>\n<\/ul>\n\n\n\n\nMaking input required:<\/strong><\/li>\n<\/ul>\n\n\n\n\nYou can use the required attribute as an easy way of making entering a value required (for password) before form submission is allowed.<\/li>\n\n\n\n Readonly: <\/strong>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input.<\/li>\n<\/ul>\n\n\n\n<\/span>Number Control<\/strong><\/span><\/h3>\n\n\n\n\n<input> elements of type number are used to let the user enter a number.<\/li>\n\n\n\n They include built-in validation to reject non-numerical entries.<\/li>\n<\/ul>\n\n\n\n\n<input type=\u201dnumber\u201d><\/li>\n<\/ul>\n\n\n\n\nValue:<\/strong> A Number representing the value of the number entered into the input<\/li>\n\n\n\n You can set a default value for the input by including a number inside the value attribute<\/li>\n\n\n\n <input type=number value=\u201d10\u201d><\/li>\n\n\n\n Max: <\/strong>The maximum value to accept for this input<\/li>\n\n\n\n Min: <\/strong>The minimum value to accept for this input<\/li>\n\n\n\n Placeholder: <\/strong>It is a string that provides a brief hint to the user as to what kind of information is expected in the field.<\/li>\n\n\n\n Step: <\/strong>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount.<\/li>\n<\/ul>\n\n\n\n\n<input type=\u201dnumber\u201d step=\u201d10\u201d placeholder=\u201dMultiple of 10\u201d><\/li>\n<\/ul>\n\n\n\n\nYou can also allow decimals here<\/li>\n<\/ul>\n\n\n\n\n<input type=number step=\u201d0.01\u2033><\/li>\n<\/ul>\n\n\n\n<\/span>Radio Button Control<\/strong><\/span><\/h3>\n\n\n\n\nThe radio button is used to select one option from multiple options.<\/li>\n\n\n\n It is used for selection of gender, quiz questions etc.<\/li>\n\n\n\n Use one name for all the radio buttons, to select one radio button at a time.<\/li>\n<\/ul>\n\n\n\n<form>\u00a0\n\u00a0\u00a0\u00a0 Gender:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"radio\" name=\"gender\" value=\"male\">Male\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"radio\" name=\"gender\" value=\"female\">Female\n<\/form><\/code><\/pre>\n\n\n\n\nValue: <\/strong>It is a string containing the radio button\u2019s value. It is used to identify which radio button in a group is selected.<\/li>\n\n\n\n Checked: <\/strong>It indicates that this radio button is the default selected one in the group.<\/li>\n<\/ul>\n\n\n\nSelect Gender:\n<input type=\"radio\" name=\"contact\" value=\"Female\" checked >Female<br>\u00a0\n<input type=\"radio\" name=\"contact\" value=\"Male\">Male<\/code><\/pre>\n\n\n\n\nRequired: <\/strong>When this boolean attribute is present in any of the radio buttons of a particular group, the browser won\u2019t allow the submission of the form until one of the buttons in the group has been checked.<\/li>\n<\/ul>\n\n\n\n<\/span>Checkbox Control<\/strong><\/span><\/h3>\n\n\n\n\nThe checkbox control is used to check multiple options from given check boxes.<\/li>\n\n\n\n These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display.<\/li>\n<\/ul>\n\n\n\n<body>\n<form>\u00a0\nSubject of Interest: <br>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"checkbox\" name=\"html\" value=\"HTML\">\u00a0\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0HTML <br>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"checkbox\" name=\"c\" value=\"Language C\">\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Language C<br>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"checkbox\" name=\"cf\" value=\"Computer Fundamentals\">\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Computer Fundamentals<br>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"checkbox\" name=\"cs\" value=\"Communication Skills\">\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Communication Skills\u00a0\n<\/form>\n<\/body><\/code><\/pre>\n\n\n\n\nValue: <\/strong>It is a string representing the value of the checkbox.<\/li>\n\n\n\n This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox\u2019s name.<\/li>\n\n\n\n Checked: <\/strong>It indicates whether or not this checkbox is checked by default, when the page loads.<\/li>\n<\/ul>\n\n\n\n<form>\u00a0\nSelect Your Subjects :\n<input type=\"checkbox\" name=\"s1\" value=\"HTML\" checked>HTML\u00a0\n<input type=\"checkbox\" name=\"s2\" value=\"CSS\" checked>CSS\n<\/form><\/code><\/pre>\n\n\n\n\nRequired: <\/strong>When this boolean attribute is present in any of the check boxes of a particular group, the browser won\u2019t allow the submission of the form until one of the radio buttons in the group has been checked.<\/li>\n<\/ul>\n\n\n\n<\/span>Button Control<\/strong><\/span><\/h3>\n\n\n\n\n<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).<\/li>\n\n\n\n Value: <\/strong>It contains a string that is used as the button\u2019s label.<\/li>\n<\/ul>\n\n\n\n\n<input type=\u201dbutton\u201d value=\u201dClick Me\u201d><\/li>\n<\/ul>\n\n\n\n<\/span>Submit button Control<\/strong><\/span><\/h3>\n\n\n\n\nHTML <input type=\u201dsubmit\u201d> are used to add a submit button on web page.<\/li>\n\n\n\n When user clicks on submit button, then form get submit to the server.\u00a0<\/li>\n<\/ul>\n\n\n\n\nSyntax: <\/strong><input type=\u201dsubmit\u201d value=\u201dsubmit form\u201d><\/li>\n<\/ul>\n\n\n\n\nThe type = \u201csubmit\u201d, specifying that it is a submit button & the value attribute can be anything which we write on button.<\/li>\n<\/ul>\n\n\n\n<form>\u00a0\n\u00a0\u00a0\u00a0 Enter name<br>\u00a0\n\u00a0\u00a0\u00a0 <input type=\"text\" name=\"name\"><br>\u00a0\n\u00a0\u00a0\u00a0 Enter Password<br>\u00a0\n\u00a0\u00a0\u00a0 <input type=\"Password\" name=\"pass\"><br>\u00a0\n\u00a0\u00a0\u00a0 <input type=\"submit\" value=\"submit form\">\u00a0\n<\/form><\/code><\/pre>\n\n\n\n<\/span>Reset Button Control<\/strong><\/span><\/h3>\n\n\n\n\n<input> elements of type reset are rendered as buttons that resets all of the inputs in the form to their initial values.<\/li>\n<\/ul>\n\n\n\n\n<input type=\u201dreset\u201d value=\u201dReset the form\u201d><\/li>\n<\/ul>\n\n\n\n\nValue: <\/strong>It contains a string that is used as the button\u2019s label.<\/li>\n<\/ul>\n\n\n\n<\/span>Select Control<\/strong><\/span><\/h3>\n\n\n\n\nThe <select> HTML element represents a control that provides a menu of options.<\/li>\n<\/ul>\n\n\n\n<select name=\"subjects\">\n\u00a0\u00a0\u00a0 <option value=\"\">--Please choose an option--<\/option>\n\u00a0\u00a0\u00a0 <option value=\"language c\">Language C<\/option>\n\u00a0\u00a0\u00a0 <option value=\"cf\">Computer Fundamentals<\/option>\n\u00a0\u00a0\u00a0 <option value=\"html\">HTML & Networking<\/option>\n<\/select><\/code><\/pre>\n\n\n\n\nName:<\/strong> It is used to represent the name of the associated data point submitted to the server.<\/li>\n\n\n\n <Option><\/strong>: Each menu option is defined by an <option> element nested inside the <select>.<\/li>\n\n\n\n Value: <\/strong>Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected.<\/li>\n\n\n\n Selected: <\/strong>You can include a selected attribute on an <option> element to make it selected by default when the page first loads.<\/li>\n\n\n\n Multiple: <\/strong>It is used to specify whether multiple options can be selected. It is written inside <select><\/li>\n\n\n\n Size: <\/strong>It is used to specify how many options should be shown at once. It is written inside <select>.<\/li>\n<\/ul>\n\n\n\n<\/span><textarea> <\/strong>Control<\/span><\/h3>\n\n\n\n\nThe <textarea> tag in HTML is used to insert multiple-line text in a form.<\/li>\n\n\n\n It allows users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.<\/li>\n\n\n\n The size of <textarea> can be specify either using \u201crows\u201d or \u201ccols\u201d attribute or by CSS.<\/li>\n<\/ul>\n\n\n\n<body>\u00a0\n\u00a0 <form>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Enter your address:<br>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0 <textarea rows=\"2\" cols=\"20\"><\/textarea>\u00a0\n\u00a0 <\/form>\u00a0\n<\/body><\/code><\/pre>\n\n\n\n\nrows and cols attributes to allow you to specify an exact size for the <textarea> to take.<\/li>\n\n\n\n The <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required.<\/li>\n\n\n\n Minlength & maxlength attributes restricts the user to enter up to certain number of characters.<\/li>\n<\/ul>\n\n\n\n<\/span><map><\/strong> Control<\/span><\/h2>\n\n\n\n\nIt is used with <area> elements to define an image map which is a clickable link area.<\/li>\n\n\n\n Name: <\/strong>The name attribute gives the map a name so that it can be referenced.<\/li>\n<\/ul>\n\n\n\n<map name=\"primary\">\n\u00a0 <area shape=\"circle\" coords=\"75,75,75\" href=\"left.html\">\n\u00a0 <area shape=\"circle\" coords=\"275,75,75\" href=\"right.html\">\n<\/map>\n<img usemap=\"#primary\" src=\"d:\/image1.png\" alt=\"350 x 150 pic\"><\/code><\/pre>\n\n\n\n<\/span><area><\/strong> Control<\/strong><\/span><\/h3>\n\n\n\n\nIt defines an area inside an image map that has predefined clickable areas.<\/li>\n\n\n\n An image map allows geometric areas on an image to be associated with hypertext link.<\/li>\n\n\n\n This element is used only within a <map> element.<\/li>\n\n\n\n Alt: <\/strong>A text string alternative to display on browsers that do not display images.<\/li>\n\n\n\n Shape: <\/strong>The shape of the associated hot spot.<\/li>\n\n\n\n The specifications for HTML define the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes.<\/li>\n\n\n\n Coords: <\/strong>The coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area>.<\/li>\n\n\n\n rect: the value is x1,y1,x2,y2.<\/li>\n\n\n\n Value specifies the coordinates of the top-left and bottom-right corner of the rectangle.<\/li>\n<\/ul>\n\n\n\n\nFor example: <area shape=\u201drect\u201d coords=\u201d0,0,253,27\u2033 href=\u201dpage.html\u201d><\/li>\n<\/ul>\n\n\n\n\nThe coords in the above example specify: 0,0 as the top-left corner and 253,27 as the bottom-right corner of the rectangle.<\/li>\n\n\n\n circle: The value is x, y, radius.<\/li>\n\n\n\n Value specifies the coordinates of the circle center and the radius.<\/li>\n<\/ul>\n\n\n\n\nFor example: <area shape=\u201dcircle\u201d coords=\u201d130,136,60\u2033 href=\u201dpage.html\u201d><\/li>\n<\/ul>\n\n\n\n\npoly: The value is x1,y1,x2,y2,..,xn,yn.<\/li>\n\n\n\n Value specifies the coordinates of the edges of the polygon.<\/li>\n\n\n\n If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon<\/li>\n\n\n\n default: defines the entire region<\/li>\n\n\n\n href: <\/strong>The hyperlink target for the area. Its value is a valid URL.<\/li>\n<\/ul>\n<\/body>","protected":false},"excerpt":{"rendered":"HTML Form HTML Form Syntax <input> element TextField Control\u00a0 Password Field Control Number Control Radio Button Control Checkbox Control Button Control Submit button Control Reset Button Control Select Control <textarea> Control <map> Control <area> Control<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-842","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=842"}],"version-history":[{"count":30,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/842\/revisions"}],"predecessor-version":[{"id":4280,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/842\/revisions\/4280"}],"wp:attachment":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}