6.1 HTML form syntax

HTML form elements are just normal HTML elements, so all of the normal rules of HTML syntax apply (see Chapter 3).

All electronic form components must appear within a form element and the form element must appear within the body of the HTML code. Figure 6.2 shows the HTML code behind the electronic form in Figure 6.1.

**Figure 6.2:** HTML code for example form components.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Electronic Form Demo</title> <script type="text/ecmascript" src="validate.js"></script> <script type="text/ecmascript" src="echo.js"></script> </head> <body> <form onsubmit="return(saveform())"> <p> Number of children: <input type="text" name="numChildren" value="0" size="2" maxlength="2" onblur="isIntegerRange(this, 0, 15)"> </p> <p> Choose a gender: <input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female </p> <p> Choose the colours you like: <input type="checkbox" name="colourBlue" checked> Blue <input type="checkbox" name="colourPink"> Pink </p> <p> Choose a race: <input type="radio" name="race" value="euro"> European <input type="radio" name="race" value="kiwi" checked> Kiwi <input type="radio" name="race" value="other"> Other </p> <p> Choose an age group: <select name="agegp"> <option>0-10</option> <option>10-20</option> <option>20-30</option> <option selected>30-40</option> <option>40-50</option> <option>50-60</option> </select> </p> <p> <textarea name="openText">Comments ... ?</textarea> </p> <p> <input type="submit" value="submit"> <input type="reset" value="reset"> <input type="button" value="export" onclick="echoform()"> </p> <input type="hidden" id="echoFormFormat" value="html"> </form> </body> </html>

Figure 6.2: HTML code for example form components.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Electronic Form Demo</title>
    <script type="text/ecmascript" src="validate.js"></script>
    <script type="text/ecmascript" src="echo.js"></script>
</head>
<body>
    <form onsubmit="return(saveform())"> 
    <p>
        Number of children: 
        <input type="text" name="numChildren" value="0"
               size="2" maxlength="2"          
               onblur="isIntegerRange(this, 0, 15)">
    </p>
    <p>
        Choose a gender: 
        <input type="radio" name="gender" value="male" checked> Male
        <input type="radio" name="gender" value="female"> Female
    </p>
    <p>
        Choose the colours you like: 
        <input type="checkbox" name="colourBlue" checked> Blue
        <input type="checkbox" name="colourPink"> Pink
    </p>
    <p>
        Choose a race: 
        <input type="radio" name="race" value="euro"> European
        <input type="radio" name="race" value="kiwi" checked> Kiwi
        <input type="radio" name="race" value="other"> Other
    </p>
    <p>
        Choose an age group:
        <select name="agegp">
            <option>0-10</option>
            <option>10-20</option>
            <option>20-30</option>
            <option selected>30-40</option>
            <option>40-50</option>
            <option>50-60</option>
        </select>
    </p>
    <p>
        <textarea name="openText">Comments ... ?</textarea>
    </p>
    <p>
        <input type="submit" value="submit">
        <input type="reset" value="reset">
        <input type="button" value="export" onclick="echoform()">
    </p>
        <input type="hidden" id="echoFormFormat" value="html">
    </form>
</body>
</html>