Question

I am trying to create a single web page that will display easily on a mobile device, but I am having trouble and was hoping someone could point me in the correct direction. Please understand that I am new to programming and am learning as I go.

Unfortunately I can not figure out hot to show my code here, but here is a link to the page in question:

Form for mobile devices

Does anyone see anything that would prevent my form from showing up on a smaller screen without having to use scroll bars?

Thanks!

Answer 1

I recommend you drop the fixed-width table layout for your form and use a natual flowing layout instead. Here is an example of the first couple of fields:

<form name="contactinfo" method="post" action="process.php" onsubmit="return validateForm();">
    <fieldset>
        <legend>Application Request Form</legend>
        <div>
            <label for="name">Full Name</label><br>
            <input type="text" name="name" id="name">
        </div>
        <div>
            <label for="email">E-Mail</label><br>
            <input type="email" name="email" id="email">
        </div>
        ...
    </fieldset>
</form>

This will immediately help the layout adjust to different devices and it is also better mark-up for the form.

Other recommendations:

• Put all your styles in CSS.
• Move your JavaScript to the bottom of the page (i.e. the validation function)
• Consider whether you really need a reset button? What’s the use case for it?