Mandatory field requirements Now that you know how to enable users to submit forms, you can learn how to require that certain fields be filled out. One of the biggest problems with having forms on a Web site is that people never fill out all the information you want them to. This next feature of FML designates the required fields, which combined with the input validation discussed earlier, is designed to ensure you get the most accurate data possible short of reading and verifying it yourself. With your form, you want shoppers to supply a valid name and e-mail address so you have a place to both ship the merchandise and an e-mail to which you can send the receipt. Using the attribute mandatory with a value of yes, you can set each field to require that the user fill it out with data. Here's what your FML now looks like with the mandatory requirements:

   <x:form  id="contactform"  action="http://www.mozquito.org/servlets/Echo">
   Name:
   <x:textinput id="name"  size="30" send="yes" mandatory="yes" /><br  />
   E-Mail:
   <x:textinput id="email"  size="30" ctype="email" validation="strict"  send="yes" mandatory="yes" /><br />
 <x:button  value="Submit" onclick="submit:contactform" />

You cannot submit the form until all the required fields have been filled out. In the case of the email field, the required data would be a valid e-mail address. Sometimes showing the ID for a field in the error alert can be confusing to a user, especially if you have lots of fields and lots of different forms. The field names may not even correspond with the text that appears next to it. In order to make mandatory field errors a little more understandable, you need to define the adjacent text as the field's labels. This results in the labels, rather than the field names, appearing in the error message so they are more specific and a little clearer. Use of the element <x:label> is identical to that of its HTML 4.01 brother, <label> . The for attribute of the label element contains the value of the name attribute for the field with which it is associated.

   <x:label  for="name">Name</x:label>:
 <x:textinput id="name"  size="30" send="yes" mandatory="yes" />

 Here's what the new FML code should look like:

   <x:form id="contactform"  action="http://www.mozquito.org/servlets/Echo">
   <x:label  for="name">Name</x:label>:
   <x:textinput id="name"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label  for="email">E-Mail</x:label>:
   <x:textinput id="email"  size="30" ctype="email" validation="strict"  send="yes" mandatory="yes" /><br />
   <x:button value="Submit"  onclick="submit:contactform" />
   </x:form>

Save your file Now that you have a pretty thorough form structure, add the rest of the fields, including address, city, state, country, postal code, and phone number. After adding these fields, and requiring all of them to be mandatory, you should now have the following (expanded) FML document:

   <x:form id="contactform"  action="http://www.mozquito.org/servlets/Echo">
   <x:label  for="name">Name</x:label>:
   <x:textinput id="name"  size="30" send="yes" mandatory="yes" /><br  />
   <p><x:label  for="address1">Address</x:label>:
   <x:textinput  id="address1" size="30" send="yes"  mandatory="yes" /><br />
   <x:label for="address2">Address  2</x:label>:
   <x:textinput id="address2"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label  for="city">City</x:label>:
   <x:textinput id="city"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label  for="state">State</x:label>:
   <x:textinput id="state"  size="2" send="yes" mandatory="yes" /><br  />
   <x:label for="postal">Postal  Code</x:label>:
   <x:textinput id="postal"  size="10" send="yes" mandatory="yes" /><br  />
   <x:label  for="country">Country</x:label>:
   <x:textinput id="country"  size="30" send="yes" mandatory="yes" /><br  />
   </p>
   <p>
   <x:label for="phone">Phone  Number</x:label>:
   <x:textinput id="phone"  size="30" send="yes" mandatory="yes" />
   </p>
   <x:label for="email">E-Mail</x:label>:
   <x:textinput id="email"  size="30" ctype="email" validation="strict"  send="yes" mandatory="yes" /><br />
   <x:button value="Submit"  onclick="submit:contactform" />
 </x:form>

Check that your form is well formed and valid, then save it and push it through to your browser. It's not the prettiest looking thing in the world, but you can fix that later in the article. Functionality is your primary goal at the moment. Speaking of functionality, it is time to make some of those fields more useful. After a while, your users will tire of filling out all that information. You can help them by turning some of the "common-knowledge" fields like Country or State into pull-down lists.

Editable lists One of the great things about the versatility of FML is that it allows you to employ lists to which the user can add. For instance, let's say you want to turn the Country list into a pull-down. We wouldn't want 100 options from which to choose. That would bulk out your final page with more data than you need. Why not start with the so-called "Global Eight" nations? Here's an example of an FML pull-down menu. Instead of the <select> element as used in HTML 4.01, FML uses <x:pulldown> for a more logical approach:

   <x:label  for="countries">Country</x:label>:
   <x:pulldown  id="countries" send="yes" mandatory="yes">
   <x:option>Make your  choice:</x:option>
   <x:option  value="Canada">Canada</x:option>
   <x:option  value="France">France</x:option>
   <x:option  value="Germany">Germany</x:option>
   <x:option  value="Italy">Italy</x:option>
   <x:option  value="Japan">Japan</x:option>
   <x:option  value="Russia">Russia</x:option>
   <x:option value="United  Kingdom">United Kingdom</x:option>
   <x:option value="United  States">United States</x:option>
 </x:pulldown>

Notice that the content between the <x:option> and </x:option> elements shows up in the browser. The content in the value attribute is what actually gets sent. The <x:pulldown> element only allows for a single selection. If you want your users to be able to select more than one option, change <x:pulldown> to <x:listbox>. The <x:listbox> element also has an extra attribute of rows. If you want your users to see a scroll bar, be sure to set the value of the rows attribute to less than the amount of <x:option> elements. If you do not want to see a scroll bar at all, then set the value of rows to the exact number of <x:option> elements. What happens if your user selects the "Make your choice" option? Nothing, actually. The only thing sent back to the server is content within the value attribute, so this option sends no information because it lacks the value attribute. Let's say you want to solicit further information from the user. While this may not be mandatory information for processing an order, it never hurts to get some extra data from your customers. Add a question asking the gender of the person filling out the form. But instead of a pull-down menu, which is inappropriate for this type of information, use radio buttons. Radio buttons are done very similar to a pull-down menu except you use <x:item> in place of the <x:option>.

   What is your <x:label  for="gender">gender</x:label>:<br />
 <x:radio id="gender"  send="yes">
 <x:item  value="Male">Male</x:item>
 <x:item  value="Female">Female</x:item>
 </x:radio>

The element <x:checkbox> also utilizes the <x:item> element. Now you're ready for the final piece of your contact form: the comments section. For user comments, you need to place the <x:textarea> element. Almost exactly as you do with the HTML 4.01 version of this element, determine the size of the content area with the rows and cols attributes.

   <x:textarea  id="comments" rows="5" cols="25"  send="yes" mandatory="yes" />
 

Creating an open-ended pull-down menu Remember when I said at the beginning of the article that these lists were editable? To do this, use FML's <x:toggle> element, which enables people to select "Other" from the pull-down list and then input their selection manually. Let's try it out. First you need to add another option to your pull-down menu. Give this option a value of other and include the onclick event handler with a value of toggle:openlist.

 <x:option value="Other: "  onclick="toggle:editlist">Other</x:option>

After the </x:pulldown> element, add a new <x:textinput> element with an attribute size value of 15, an id attribute value of other, and the event handler onchange with a value of toggle:editlist.

 <x:textinput size="15"  id="other" onchange="toggle:editlist" />

Finally, you need to have an <x:toggle> element wrapping the pull-down menu. To do this, give it an id attribute with the value editlist and a new attribute shared with a value of yes. When completed, click Other in the pull-down menu and the onclick event handler looks for the element with an id value of editlist. Once it finds this element and realizes it's a toggle, it keeps the pull-down menu in an editable state while it goes to the next line after the menu – which is the new <x:textinput> element. After you fill out your Other country in the input box, the state of the field changes. The onchange event handler now adds the new country entry into the pull-down menu for the user to select. The shared attribute of <x:toggle> means that any element within the toggle shares the same id value. Therefore, any new value you enter into the input box that pops up becomes part of the pull-down and shares the new id value. Here is what the FML for this section looks like:

   <x:toggle id="editlist"  shared="yes">
   <x:pulldown id="countries"  send="yes" mandatory="yes">
   <x:option>Make Your  choice:</x:option>
   <x:option value="Canada">Canada</x:option>
   <x:option  value="France">France</x:option>
   <x:option  value="Germany">Germany</x:option>
   <x:option  value="Italy">Italy</x:option>
   <x:option  value="Japan">Japan</x:option>
   <x:option  value="Russia">Russia</x:option>
   <x:option value="United Kingdom">United  Kingdom</x:option>
   <x:option value="United  States">United States</x:option>
   <x:option value="Other: "  onclick="toggle:editlist">Other</x:option>
   </x:pulldown>
   <x:textinput id="another"  size="15" onchange="toggle:editlist" />
 </x:toggle>

After you save your document with the new FML and push it through to your browser, follow the steps of selecting the Other option from the pull-down menu and add your own country.

The finished form Now that you've completed your contact form, clean it up a bit. You can add some CSS to improve the content style and some tables to fix the layout. Here is my version of the completed contact information form FML:

   <?xml  version="1.0"?>
   <!DOCTYPE html PUBLIC  "-//OVERFLOW//DTD XHTML-FML 1.0//EN"
   "http://www.mozquito.org/dtd/xhtml-fml1.dtd">
   <html  xmlns="http://www.w3.org/1999/xhtml"  xmlns:x="http://www.mozquito.org/xhtml-fml">
   <head>
   <title>Contact  Information</title>
   <meta name="generator"  content="Mozquito Factory 1.2" />
   <link rel="stylesheet"  type="text/css"
   href="http://www.w3.org/StyleSheets/Core/Modernist"  />
   </head>
   <body>
   <h1  align="center">Contact Information</h1>
   <x:form  id="contactform"  action="http://www.mozquito.org/servlets/Echo">
   <table border="0"  align="center" cellpadding="7">
   <tr><td  colspan="3">&nbsp;</td></tr>
   <tr>
   <td  colspan="3"><x:textinput id="name"  size="30" send="yes" mandatory="yes" /><br  />
   <div  align="left"><x:label  for="name">Name</x:label></div>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:textinput  id="address1" size="30" send="yes"  mandatory="yes" /><br />
   <x:label  for="address1">Address</x:label>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:textinput id="address2"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label for="address2">Address  2</x:label>
   </td>
   </tr>
   <tr>
   <td>
   <x:textinput id="city"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label  for="city">City</x:label>
   </td>
   <td>
   <x:textinput id="state"  size="2" send="yes" mandatory="yes" />, <br  />
   <x:label  for="state">State</x:label>
   </td>
   <td>
   <x:textinput id="postal"  size="10" send="yes" mandatory="yes" /><br  />
   <x:label for="postal">Postal  Code</x:label>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:toggle id="editlist"  shared="yes">
   <x:pulldown id="countries"  send="yes" mandatory="yes">
   <x:option>Make your  choice:</x:option>
   <x:option value="Canada">Canada</x:option>
   <x:option  value="France">France</x:option>
   <x:option  value="Germany">Germany</x:option>
   <x:option  value="Italy">Italy</x:option>
   <x:option  value="Japan">Japan</x:option>
   <x:option  value="Russia">Russia</x:option>
   <x:option value="United Kingdom">United  Kingdom</x:option>
   <x:option value="United  States">United States</x:option>
   <x:option value="Other: "  onclick="toggle:editlist">Other</x:option>
   </x:pulldown>
   <x:textinput id="another"  size="15" onchange="toggle:editlist" />
   </x:toggle><br />
   <x:label  for="countries">Country</x:label>
   </td>
   </tr>
   <tr><td  colspan="3">&nbsp;</td></tr>
   <tr>
   <td>
   <x:textinput id="phone"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label for="phone">Phone  Number</x:label>
   </td>
   </tr>
   <tr>
   <td>
   <x:textinput id="email"  size="30" ctype="email" validation="strict"  send="yes" mandatory="yes" /><br />
   <x:label  for="email">E-Mail</x:label>
   </td>
   </tr>
   <tr><td  colspan="3">&nbsp;</td></tr>
   <tr>
   <td colspan="3">
   <p><strong>What is your <x:label  for="gender">gender</x:label>:</strong><br />
   <x:radio id="gender"  send="yes">
   <x:item  value="Male">Male</x:item>
   <x:item  value="Female">Female</x:item>
   <x:item  value="Other">Other</x:item>
   </x:radio>
   </p>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:label  for="comments">Comments</x:label>:<br />
   <x:textarea id="comments"  rows="5" cols="25" send="yes"  mandatory="no" />
   <p><x:button value="Submit"  onclick="submit:contactform" /></p>
   </td>
   </tr>
   </table>
   </x:form>
   </body>
 </html>