easy and quick Simple form edit please

Question

The forms which l have here, have required files to be entered before the submit button. All l need it for the top 'title' list to be required='true'. I know how to do it for each and every of the text forms but unsure how to position the code for an options choice list.

Cheers guys.

Please take a look at the jsfiddle l have created for this:

http://jsfiddle.net/New_to_Websites/5A4vS/#run

Code:

<script language="javascript">
    var sa_sent_text = 'Thank you for contacting us. We will get back to you soon.';

    function sendme() {
        alert(sa_sent_text);
        document.getElementById("name").value = "";
        document.getElementById("message").value = "";
        document.getElementById("subject").value = "";
        document.getElementById("email").value = "";
        return false;
    }
</script>
<div id="sa_contactdiv">
    <form name=sa_htmlform style="margin:0px" onsubmit="return sendme();">
        <table>
            <tr>
                <td>Title:
                    <br>
                    <select name="title" size="1">
                        <option value="Mr.">Mr.</option>
                        <option value="Mrs.">Mrs.</option>
                        <option value="Miss">Miss</option>
                        <option value="Ms.">Ms.</option>
                        <option value="Dr.">Dr.</option>
                        <option value="Prof.">Prof.</option>
                        <option value="Other">Other</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Name:
                    <br>
                    <input type="text" id="name" name="name" />
                </td>
            </tr>
            <tr>
                <td>E-mail Address: <span style="color:#D70000">*</span>

                    <br>
                    <input type="text" id="email" name="email" required="true" />
                </td>
            </tr>
            <tr>
                <td>Subject: <span style="color:#D70000">*</span>

                    <br>
                    <input type="text" id="subject" name="subject" required="true" />
                </td>
            </tr>
            <tr>
                <td>Message: <span style="color:#D70000">*</span>

                    <br>
                    <textarea name="message" id="message" cols="42" rows="9" required="true">         </textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="Send Message" style="font-weight:bold">
                </td>
            </tr>
        </table>
    </form>
</div>

Answer 1

This should work:

<select name="title" size="1" required aria-required=”true”>
     <option value="">Please Choose</option>
     <option value="Mr.">Mr.</option>
     <option value="Mrs.">Mrs.</option>
     <option value="Miss">Miss</option>
     <option value="Ms.">Ms.</option>
     <option value="Dr.">Dr.</option>
     <option value="Prof.">Prof.</option>
     <option value="Other">Other</option>
</select>

If you have an option with a empty value as default, the required attribute works.

Working Fiddle

The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

Quoted from http://dev.w3.org/html5/spec-author-view/the-select-element.html

Answer 2

Try this

<td>Title:<span style="color:#D70000">*</span>
                    <br>
                    <select name="title" size="1" required="true">
                        <option value=""></option>
                        <option value="Mr.">Mr.</option>
                        <option value="Mrs.">Mrs.</option>
                        <option value="Miss">Miss</option>
                        <option value="Ms.">Ms.</option>
                        <option value="Dr.">Dr.</option>
                        <option value="Prof.">Prof.</option>
                        <option value="Other">Other</option>
                    </select>