Form Fields

<BODY BGCOLOR="#DDDDDD" TEXT="#080000" LINK="#330099" ALINK="#330066" VLINK="#330066">  <div> <STYLE>  </STYLE></div> <div> <B> <A NAME="inputfields"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <DIV ALIGN="LEFT"></DIV> <div> <B>THE HTML CODE FOR INPUT FIELDS</B><B>: </B></div> <bR> <div> <B>To capture the code, press </B><B><U>Select All</U></B><B> then COPY (Ctrl C) the contents.</B></div> <div> <B>Paste (Ctrl V) code into an insert > html (webgem) in your webpage.</B></div> <bR> <div> <B>Modify the code to suit your form.</B></div> <bR> <div> <B>BOLD BLACK:  This is the NAME OF THE FIELD.  Each field must have a unique name!</B></div> <div> <B> <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="9" WIDTH="652" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 453 WIDTH="624"><div> <B>Simple text entry:</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>        <input type="Text" name="small" size="10" maxlength="10">  </B></FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code1"> <a class="highlighttext" href="javascript:HighlightAll('code1.select1')">Select All</a><br> <textarea name="select1" rows=1 cols=60 > <input type="Text" name="Name" size="60" maxlength="60"> </textarea> </form>  </B></div> <div> <B>Four plain examples:</B></div> <div> <input type="Text" name="<B>Name</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >60</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >60</FONT>"></div> <div> <input type="Text" name="<B>123-s</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >10</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>"></div> <div> <input type="Text" name="<B>small</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >10</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>"></div> <div> <input type="Text" name="<B>1</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >10</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>"></div> <bR> <div> <B>This example allows more input by the user than the field size visible:</B> </div> <div> <input type="Text" name="<B>Address</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >60</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >200</FONT>"></div> <bR> <div> <B>This example allows you to put a </B><FONT SIZE="3" COLOR="#CC9900" FACE="Arial" ><B>statement</B></FONT><B> in the field directly so you do not have to have a separate description beside or above the field.  This allows the form to be thinner.</B></div> <div> <input name="<B>name</B>" type="text" value="<FONT SIZE="3" COLOR="#CC9900" FACE="Arial" ><B>Type your NAME here</B></FONT>" onfocus="this.value='';" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >25</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >60</FONT>"></div> <bR> <div> <B>Reference Note about the code:</B></div> <div> <B>Bold Black: </B>the name of the input field.</div> <div> <B>Blue:</B> this cols number tells how WIDE the input area will be.</div> <div> <B>Red:</B>  this row number tells how many characters can be input.  </div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 230 WIDTH="624"><div> <B>Simple comment/message entry: </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>  </B></FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code2"> <a class="highlighttext" href="javascript:HighlightAll('code2.select1')">Select All</a><br> <textarea name="select1" rows=1 cols=60 > <textarea name="comment" cols="52" rows="10" wrap="VIRTUAL"></textarea> </textarea> </form>  </B></div> <div> <textarea name="<B>Comment</B>" cols="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >52</FONT>" rows="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>" wrap="VIRTUAL"></textarea></div> <bR> <div> <B>This example allows your visitor to write a paragraph to you.  Used for longer entries than TEXT field.</B></div> <bR> <div> <B>Reference Note about the code:</B></div> <div> <B>Bold Black: </B>the name of the input field.</div> <div> <B>Blue:</B> this cols number tells how WIDE the input area will be.</div> <div> <B>Red:</B>  this row number tells how TALL the input area will be.  </div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 1294 WIDTH="624"><div> <B>Simple dropdown choices: </B></div> <bR> <div> <B>This example allows your visitor to choose from specific choices only.  </B></div> <bR> <div> <B>Reference Note about the code:</B></div> <div> <B>Bold Black: </B>the name of the input field.</div> <div> <FONT SIZE="2" COLOR="#339900" FACE="Arial" ><B><U>Choose</U></B></FONT><B> </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B><U>selected</U></B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>></B></FONT><B><U>CHOOSE ONE</U></B></div> <div> <B>Green:</B> this is a <B>one word </B>description that comes back in the email to you (no spaces!)</div> <div> <B>Blue:</B> this word "selected" tells the form that this is the default answer (recommend you put this at the top of the dropdown list on a line that asks visitor to choose.)</div> <div> <B>Red:</B>  this is the word or phrase contained in the dropdown on the form</div> <bR> <div> <B>Simple dropdown choice:  </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> <SELECT NAME="State" SIZE=1> <option value=CHOOSE selected>CHOOSE ONE <option value=FL>Florida <option value=GA>Georgia <option value=SC>South Carolina </SELECT>  </B></FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code3"> <a class="highlighttext" href="javascript:HighlightAll('code3.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="State" SIZE=1> <option value=CHOOSE selected>CHOOSE ONE <option value=FL>Florida <option value=GA>Georgia <option value=SC>South Carolina </SELECT> </textarea> </form>  </B></div> <div> <SELECT NAME="<B>State</B>" SIZE=1></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >CHOOSE</FONT> <FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >selected</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >CHOOSE ONE</FONT></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >FL</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Florida</FONT></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >GA</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Georgia</FONT></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >SC</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >South Carolina</FONT></div> <div> </SELECT></div> <bR> <hr> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code4"> <a class="highlighttext" href="javascript:HighlightAll('code4.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="Heard" SIZE=1> <option value=heardabout selected>PLEASE CHOOSE ONE <option value=Google>Google <option value=Othersearch>Other Search Engine <option value=CSBforum>CSB Discussion Forum <option value=TCHforum>TCH Forum <option value=Other>Some other way </SELECT> </textarea> </form>  </B></div> <div> <B>Another simple dropdown choice:    <SELECT NAME="Heard" SIZE=1> <option value=heardabout selected>PLEASE CHOOSE ONE <option value=Google>Google <option value=Othersearch>Other Search Engine <option value=CSBforum>CSB Discussion Forum <option value=TCHforum>TCH Forum <option value=Other>Some other way </SELECT>  </B></div> <div> <SELECT NAME="<B>Heard</B>" SIZE=1></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >heardabout </FONT><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" >selected</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >PLEASE CHOOSE ONE</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Google</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Google</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Othersearch</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Other Search Engine</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >CSBforum</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >CSB Discussion Forum</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >TCHforum</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >TCH Forum</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Other</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Some other way</FONT></div> <div> </SELECT></div> <bR> <hr> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code5"> <a class="highlighttext" href="javascript:HighlightAll('code5.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="123-sFrame" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value=Oak-Light>Oak - Light <option value=Oak-Dark>Oak - Dark <option value=Cherry>Cherry <option value=Black>Black metal <option value=Silver>Silver metal <option value=Gold>Gold Leaf <option value=Wedding-crystal>Wedding - Crystal </SELECT> </textarea> </form>  </B></div> <div> <B>Another simple dropdown choice:    <SELECT NAME="123-sFrame" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value="Oak -Light">Oak - Light <option value="Oak Dark">Oak - Dark <option value="Cherry">Cherry <option value="Black">Black metal <option value="Silver">Silver metal <option value="Gold">Gold Leaf <option value="Wedding crystal">Wedding - Crystal </SELECT>  </B></div> <div> Adding " " to the code allows your email response to have spaces in the option code.  See Oak Light.</div> <div> If you do not use "", the option must have no spaces!</div> <bR> <div> <SELECT NAME="<FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>123-sFrame</B></FONT>" SIZE=1></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Choose</FONT><FONT SIZE="2" COLOR="#990000" FACE="Arial" > </FONT><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" >selected</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >CHOOSE ONE </FONT>                         </div> <div>      <option value="<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Oak Light"</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Oak - Light </FONT></div> <div>      <option value="<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Oak Dark"</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Oak - Dark </FONT> </div> <div>      <option value="<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Cherry"</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Cherry </FONT></div> <div>      <option value="<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Black"</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Black metal</FONT></div> <div>      <option value="<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Silver"</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Silver metal</FONT>  </div> <div>      <option value="<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Gold"</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Gold Leaf </FONT> </div> <div>      <option value="<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Wedding crystal"</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Wedding - Crystal  </FONT></div> <div> </SELECT></div> <bR> <hr> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code6"> <a class="highlighttext" href="javascript:HighlightAll('code6.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="123-scost" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value=1=$10>1 = $10 <option value=2=$20>2 = $20 <option value=3=$25>3 = $25 <option value=4=$30>4 = $30 <option value=5=$35>5 = $35 </SELECT> </textarea> </form>  </B></div> <div> <B>Another simple dropdown choice:    <SELECT NAME="123-scost" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value=1=$10>1 = $10 <option value=2=$20>2 = $20 <option value=3=$25>3 = $25 <option value=4=$30>4 = $30 <option value=5=$35>5 = $35 </SELECT>  </B></div> <div> <B>COMBINE YOUR ANSWER TO AVOID CALCULATIONS IN YOUR FORM!</B></div> <bR> <div> <SELECT NAME="<FONT SIZE="2" COLOR="#6600CC" FACE="Arial" >123-scost</FONT>" SIZE=1></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Choose</FONT><FONT SIZE="2" COLOR="#990000" FACE="Arial" > </FONT><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" >selected</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >CHOOSE ONE </FONT>                         </div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >1=$10</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >1 = $10 </FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >2=$20</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >2 = $20</FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >3=$25</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >3 = $25</FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >4=$30</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >4 = $30</FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >5=$35</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >5 = $35</FONT></div> <div>  </SELECT></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 210 ><NOBR><div> <B>Simple radio dial entry:       <input type="radio" name="MornEve" value="AM"> AM <input type="radio" name="MornEve" value="PM" checked> PM  </B></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code7"> <a class="highlighttext" href="javascript:HighlightAll('code7.select1')">Select All</a><br> <textarea name="select1" rows=2 cols=60 > <input type="radio" name="MornEve" value="AM"> AM <input type="radio" name="MornEve" value="PM" checked> PM </textarea> </form>  </B></div> <div> <input type="radio" name="<FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>MornEve</B></FONT><FONT SIZE="3" COLOR="#990000" FACE="Arial" >"</FONT> value="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >AM</FONT>"> <FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>AM</B></FONT></div> <div> <input type="radio" name="<FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>MornEve</B></FONT><FONT SIZE="3" COLOR="#990000" FACE="Arial" >"</FONT> value="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >PM</FONT>" <FONT SIZE="3" COLOR="#339900" FACE="Arial" >checked</FONT>> <FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>PM</B> </FONT></div> <bR> <div> <B>Reference Note about the radio dial code:</B></div> <div> All choices for this field must be in the <B>same cell</B> to avoid errors.</div> <div> <B>Green:</B> this word "checked" tells the form that this is the default answer</div> <div> <B>Purple:</B><FONT SIZE="2" COLOR="#660066" FACE="Arial" >  </FONT>this word is typed into the table, not the inserted HTML code</div> <div> <B>Red:</B>  this is the word or phrase shown on the form</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 38 ><NOBR><div> <B>Don't use check boxes if possible.  </B></div> <div> <B>(Empty box can produce errors on some servers, so I did not include the code on purpose)</B></div> </NOBR></tD> </tR> </TABLE></B></div> <bR> <div> <A HREF="id37.htm" TARGET="_top" TITLE="Design a Form!">Return to Design a Form</A></div> </BODY>