hullo to all, first of all, i express my sincere gratitude to all of you for replying to my query so nicely. i will certainly try to follow these instructions in my web page. so from the bottom of my heart, i once again thank all of you for giving me your valluable time. i have created my site by learning the course from danishkadah and i do request all of you to kindly go through the same and give your valluable suggestions. you may visit the following site for the same: http://www.themumbaicity.webs.com your kind coperation in this regard is highly solicited. with regards, mukesh jain. On 2/23/09, Amiyo Biswas <[email protected]> wrote: > hello Mukesh, > > I am pasting below my notes on form design using notepad for creating html > tags. Hope, it will help. > > Best regards, > Amiyo Biswas. > > Cell: +91-9433464329 > Skype ID: amiyo11 > > Using forms in an html document > > Today visitors to a web site expect to interact with it and one method for > achieving this is to use a form. This may look just like a paper form or on > some sites you may not feel that a form is being filled in. Typical uses of > forms are: > Surveys > Quotations, such as car insurance > Ordering a product > Searching a web site > Providing feedback > > Forms can also be used to obtain customers' preferences and opinions. People > would rather complete an online form than send an email. With a form they do > not have to think, they only answer the questions. > > A form can be defined anywhere in an html document. While defining forms, > the <pre> tag is very useful to specify how it should look. > > <form> > A form is defined with the <form> tag. Inside the tag you must say how you > want the contents of the form to be sent to you. The recommended method is > to have it sent by email which is achieved by adding to the tag the > parameter <method= "post"> and then the parameter <action=> to advise the > browser what to do with the data just received. Usually the <action=> clause > would point to an url for a cgi script or if you wanted to send it via > email, it would be <action= "mailto:your email address"> > > <input> > To input information into the form, first some text is required to tell the > reader what to input. This is achieved as if we were writing any text in > html. Then to specify the input field use the tag <input> followed by some > of these clauses inside the tag. > > name= " " To give each field of information a name > size= To specify the maximum length of the text string > src= If an image is associated with the input field > type= To specify the type of field, text, checkbox or combo box > align= To specify position of the field > > So to define an input field of 40 characters the tag would be > <input name= "FullName" size=40> > > Now let us use this technique to create a simple form: > > test15.htm > <html> > <title>Simple form</title> > <h2 align=center>Please fill in the form below</h2> > <form method= "post" action= "mailto:[email protected]";> > > Your name in full: > <br> > <input name= "FullName" type= text size=40> > <br> > Postal address (please write within 80 characters): > <br> > <input name= "Address" type= text size=80> > <br> > Your email address: > <br> > <input name= "Email" type= text size=20> > > </form> > </html> > > Note that you can test the layout of your form offline. But to test the > submission of a form you have to go online, fill in the form and submit it > for a proper test. > > More form options > > In the previous example the only data we could input was text, but it can > take the following values: > > Password: Typed text is hidden, ideal for password or credit card details > which you may not want to be displayed on a screen > > Checkbox: Used to indicate options > > Submit: Generates a button to submit the form > > Reset: Generates a button to clear data and refresh the form > > File: Used to upload a file > > Image: Same as submit but uses an image for button > > <submit> and <reset> > The form on the previous example will never be sent to anyone as it did not > have a submit button. This button is created using the clause <type=submit>. > It is a good idea to include a reset button on your form using the clause > <type=reset> just in case someone makes a mistake. > > <textarea> > To create a multiline area to input text you can use the tag called > <textarea>. Inside the tag specify <name=> for the field name and then how > many <rows=> and <cols=> are required. This is closed with tag </textarea>. > Therefor to create a comment area containing 5 rows of 40 columns the tag > would be as follows: > <textarea name= "Comments" rows=5 cols=40> > > If you create several text areas on a form, the tab order can be controlled > by adding the clause <tabindex=> to this tag. > > Let us create yet another form with the technique we have just learned: > > test151.htm > <html> > <title>Survey form</title> > <h2 align=center>Please fill in the form below with your opinion</h2> > <form method= "post" action= "mailto:[email protected]";> > > Your name in full: > <br> > <input name= "FullName" type= text size=40> > <br> > Your password: > <input name= "Password" type= password size=10> > <br> > Your comments (in not more than 5 lines): > <br> > <textarea name= "Comments" rows=5 cols=40> </textarea> > > <input type="submit"> > <input type="reset"> > > </form> > </html> > > Checkboxes > Checkboxes are extremely useful for asking questions. Rather than struggling > to type in an answer, visitors can click on a box that is appropriate to > them. To create a checkbox use the clause <type= checkbox> inside the > <input> tag. > > Combo box > You can create a drop-down list of options from which the user can select. > This technique is used with <select> and <option> tags. > > first give the <select> tag with optional clauses <name= " "> and <size=> to > determine the number of choices the user will see. Then for each item in the > list use the <option> tag with a <value=> clause with the value and text > associated with that value. Finally close the list with the </select> tag. > > Radio buttons > Radio buttons are useful for asking the visitors to select one of several > choices. Rather than struggling to type in an answer, visitors can click on > a radio button that is appropriate to them. Selecting one radio button > automatically turns off all other radio buttons forcing the visitor to > choose only one of several options. > > To create a radio button use the clause <type= radio> inside the <input> > tag. You have to use it for each option. Then use the name= clause to > specify a name for the radio button. In this case again repeat the same name > for each option. Use the value= clause to specify a value for each option. > Insert some text after the tag to display what option the radio button > implies. > > Range of values > There are times when you want to control the value a field may take. This is > possible by adding the clause <min=> and <max=> and a <type=range> clause to > the <input> tag. > > You can use the size= clause for an input field where some text is entered, > for instance, for the name field, to control the size of the box displayed. > The maxlength= clause will control the size of the text entered. Obviously, > the value of maxlength will be greater than the value of size. When the text > no longer fits the specified size, the browser will scroll to the right. > > Another point to note is that you can insert some text to display along with > the submit button and reset button for clarity. Just use the value= clause > inside the input tag to display the text. Notice its use in test152.htm. > > Caution: If you use spaces in the parameters of name, value etc, do not > forget to enclose them in quotes. Otherwise the browser will use only the > first word as name or value. > > Now let us use these new methods in test152.htm: > > test152.htm > <html> > <title>Survey form</title> > <h2>Please fill in the form below with your personal details and > opinion</h2> > > <form method= "post" action= "mailto:[email protected]";> > > Your name in full: > <br> > <input name= "FullName" type= text size=20 maxlength=40> > > <p> > Are you married? > <br> > <input name="Marital status" type =checkbox> Yes > > <p> > Age > <br> > <input name= "Age" type= range min=18 max=110 size=3> > > <p> > Profession > <br> > <select name="Profession"> > <option value= "Educational service"> Educational service > <option value= "Administrative service"> Administrative service > <option value= "Computer professional"> Computer professional > <option value= "Other"> Other > </select> > > <p> > Visual status > <br> > <input type=radio name="Visual status" value= "Totally blind">Totally blind > <br> > <input type=radio name="Visual status" value= "Partially sighted">Partially > sighted > <br> > <input type=radio name="Visual status" value= "Sighted">Sighted > > <p> > Any other remark > <br> > <textarea name= "Remarks" rows=2 cols=40> </textarea> > > <input type="submit" value= "Submit form"> > <input type="reset" value= "Rewrite form"> > > <p> > We asure you that the information you submit along with your email address > will not be disclosed to any third party or put to any kind of commercial > use. > </form> > </html> > > Additional hints on combo box > Usually only the first option of a drop-down list is visible to the user. > You can make the browser display more options by adding the parameter > <size=> inside the <select> tag. > > You can convert a combo box into a multiselect list box where the user can > specify more than one choice by adding the parameter <multiple> inside the > <select" tag. It will display all options on the screen, if possible. > Otherwise, the selection list arrow will indicate that there are more > options available. Notice the following code: > <select name="Services" size=3 multiple> > > The first item of a selection list is displayed by default. But you can > specify any other item by ading the parameter <selected> inside the <option> > tag as in the following code: > <option value= "Legal aid" selected> Legal aid > > Text area > You can display some default text on the screen to help the user understand > where he is supposed to enter his comments. You have to insert the default > text between <textarea> and </textarea> tags. Observe the following line of > html code: > <textarea name= "Remarks" rows=2 cols=40>Type in your comments and > suggestions here.</textarea> > > You can control the word wrap feature of the text area field by using > <wrap=> clause inside the <textarea> tag. <off> is the default parameter > which means that the user has to press enter after each line of text. If you > use <wrap=virtual> parameter, the text will automatically wrap around lines, > but the browser will not send any new line character to the post. You can > use <wrap= physical> parameter so that the browser inserts new line > characters in proper places. It will make decoding easier. In the last two > instances the user will not notice any difference since in both cases text > will wrap without his hitting the enter key. > > Let us revise test152.htm with what we have just learned. > > test153.htm > <html> > <title>Survey form</title> > <h2>Please fill in the form below with your personal details and > opinion</h2> > > <form method= "post" action= "mailto:[email protected]";> > > Your name in full: > <br> > <input name= "FullName" type= text size=20 maxlength=40> > > <p> > Are you married? > <br> > <input name="Marital status" type =checkbox> Yes > > <p> > Age > <br> > <input name= "Age" type= range min=18 max=110 size=3> > > <p> > Profession > <br> > <select name="Profession"> > <option value= "Educational service"> Educational service > <option value= "Administrative service"> Administrative service > <option value= "Computer professional"> Computer professional > <option value= "Other"> Other > </select> > > <p> > Visual status > <br> > <input type=radio name="Visual status" value= "Totally blind">Totally blind > <br> > <input type=radio name="Visual status" value= "Partially sighted">Partially > sighted > <br> > <input type=radio name="Visual status" value= "Sighted">Sighted > > <p> > Services you require (You can select more than one from the list) > <br> > <select name="Services" size=3 multiple> > <option value= "Financial service"> Financial service > <option value= "Child care"> Child care > <option value= "Legal aid" selected> Legal aid > <option value= "Medical care"> Medical care > <option value= "Insurance"> Insurance > <option value= "Portfolio management"> Portfolio management > <option value= "Real estate management"> Real estate management > </select> > > <p> > Any other remark > <br> > <textarea name= "Remarks" rows=2 cols=40>Type in your comments and > suggestions here.</textarea> > > <input type="submit" value= "Submit form"> > <input type="reset" value= "Rewrite form"> > > <p> > We asure you that the information you submit along with your email address > will not be disclosed to any third party or put to any kind of commercial > use. > </form> > </html> > > > ----- Original Message ----- > From: "mukesh jain" <[email protected]> > To: <[email protected]> > Sent: Sunday, February 22, 2009 2:35 PM > Subject: Re: [AI] How to design a website accessible for VIs? > > >> hullo, i have just done one course for creating website from >> danishkadah. in this course, we have been tought several things for >> creating own website and i found it very useful. but i would like to >> know that how to create buttons, check boxes and combo boxes, edit >> boxes on the site? what program is to be used for the same and is it >> accessible with jaws or any other screen reader?your coperation in >> this regard is highly solicited. >> with regards, >> mukesh jain. >> >> On 2/22/09, govind reddy <[email protected]> wrote: >>> Hello list members: >>> One of the small NGOs in Andrapradesh wants to design a website which >>> is accessible for VIs and other challenged students. So what are the >>> issues to be considered while designing a website? We had a protest in >>> Mumbai about web accessibility norms what are they? This website >>> contains all the activities organised by them. All the views from your >>> side are greatly welcomed. >>> Regards, >>> Govind. >>> Skype: govindhowsweet >>> >>> >>> >>> To unsubscribe send a message to [email protected] >>> with >>> the subject unsubscribe. >>> >>> To change your subscription to digest mode or make any other changes, >>> please >>> visit the list home page at >>> >>> http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in >>> >> >> >> >> To unsubscribe send a message to [email protected] >> with the subject unsubscribe. >> >> To change your subscription to digest mode or make any other changes, >> please visit the list home page at >> http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in >> >> __________ Information from ESET NOD32 Antivirus, version of virus >> signature database 3876 (20090221) __________ >> >> The message was checked by ESET NOD32 Antivirus. >> >> http://www.eset.com >> >> >> > > > > > To unsubscribe send a message to [email protected] with > the subject unsubscribe. > > To change your subscription to digest mode or make any other changes, please > visit the list home page at > http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in >
To unsubscribe send a message to [email protected] with the subject unsubscribe. To change your subscription to digest mode or make any other changes, please visit the list home page at http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in
