Q:

If-Then-Else for my simple HTML form

I've set up a server, which sends the following form to a client and tries to receive the submitted information. How can I add a If-Else to it as simple as possible? I need to say if the "use tracefile" is enabled, then show the dropdown box, otherwise, show the customized inputs so that user can enter his/her numbers?
My second concern is that the form does not seem very beautiful. How can I make it aligned, all input boxes be aligned, and such?
    <html>
<body>
    <p>
    <h3>Please select a configuration below to run the emulator with:</h3>
    <form action="run.html" method="GET">
        <input type="checkbox" name="-w" value="-w">[-w]: wrap around at tracefile end and begin anew at time zero. </input>
<br>
<input type="checkbox" name="-z" value="-w">[-z]: zero packets routed through; route to co-resident webserver  
</input>
<br>
<br> YSE Emulator to Run: <select name="yse">
            <option value="yse1">YSE1</option>
            <option value="yse2">YSE2</option>
            <option value="yse3">YSE3</option>
            <option value="yse4">YSE4</option>
            <option value="yse5">YSE5</option>
            <option value="yse6">YSE6</option>      
        </select> <br> 
<br>        
    <input type="checkbox" id="isTracefile" checked/>Use a sample tracefile
    <br>Sample Tracefiles to use: <select name="tracefile">
            <option value="capacity.1Mbps_c50.txt">capacity.1Mbps_c50</option>
            <option value="capacity.3Mbps_100RTT_PER_0.00001.txt">capacity.3Mbps_100RTT_PER_0.00001</option>
            <option value="capacity.3Mbps_100RTT_PER_0.0001.txt">capacity.3Mbps_100RTT_PER_0.0001</option>
            <option value="capacity.3Mbps_100RTT_PER_0.001.txt">capacity.3Mbps_100RTT_PER_0.001</option>
            <option value="capacity.3Mbps_100RTT_PER_0.01.txt">capacity.3Mbps_100RTT_PER_0.01</option>
            <option value="capacity.3Mbps_100RTT_PER_0.05.txt">capacity.3Mbps_100RTT_PER_0.05</option>
            <option value="capacity.3Mbps_100RTT_PER_0.1.txt">capacity.3Mbps_100RTT_PER_0.1</option>
            <option value="capacity.3Mbps_200RTT_PER_0.0001.txt">capacity.3Mbps_200RTT_PER_0.0001</option>
            <option value="capacity.3Mbps_200RTT_PER_0.001.txt">capacity.3Mbps_200RTT_PER_0.001</option>
            <option value="capacity.3Mbps_400RTT_PER_0.0001.txt">capacity.3Mbps_400RTT_PER_0.0001</option>
            <option value="capacity.3Mbps_400RTT_PER_0.001.txt">capacity.3Mbps_400RTT_PER_0.001</option>
            <option value="capacity.13Mbps_200RTT_PER_0.000001.txt">capacity.13Mbps_200RTT_PER_0.000001</option>
        </select> 
<br>
<b> OR </b>
<br>
<label>Forward Delay: </label><input id="fd" type="number" min="0" max="1000" step="1" value ="100"> ms</input>
<br>
<label>Reverse Delay: </label><input id="rd" type="number" min="0" max="1000" step="1" value ="100"> ms</input>
<br>
<label>Download Capacity: </label><input id="down" type="number" min="1" max="30" step="1" value ="1"> MBps </input>
<br>
<label>Upload Capacity: </label><input id="up" type="number" min="1" max="30" step="1" value ="1"> MBps </input>
<br>
<label>Packet Error Rate (PER): </label><input id="per" type="number" min="0.00001" max="1" step="0.00001" value ="0.00001"></input>
<br>

<br> <input type="submit" value="Run Emulator!">
    </form>

</body>
</html>

A:

I think you can solve it easily, if you can make some minor markup changes
<div id="cttracefile">
    Sample Tracefiles to use: 
    <select name="tracefile">
        <option value="capacity.1Mbps_c50.txt">capacity.1Mbps_c50</option>
        <option value="capacity.3Mbps_100RTT_PER_0.00001.txt">capacity.3Mbps_100RTT_PER_0.00001</option>
        <option value="capacity.3Mbps_100RTT_PER_0.0001.txt">capacity.3Mbps_100RTT_PER_0.0001</option>
        <option value="capacity.3Mbps_100RTT_PER_0.001.txt">capacity.3Mbps_100RTT_PER_0.001</option>
        <option value="capacity.3Mbps_100RTT_PER_0.01.txt">capacity.3Mbps_100RTT_PER_0.01</option>
        <option value="capacity.3Mbps_100RTT_PER_0.05.txt">capacity.3Mbps_100RTT_PER_0.05</option>
        <option value="capacity.3Mbps_100RTT_PER_0.1.txt">capacity.3Mbps_100RTT_PER_0.1</option>
        <option value="capacity.3Mbps_200RTT_PER_0.0001.txt">capacity.3Mbps_200RTT_PER_0.0001</option>
        <option value="capacity.3Mbps_200RTT_PER_0.001.txt">capacity.3Mbps_200RTT_PER_0.001</option>
        <option value="capacity.3Mbps_400RTT_PER_0.0001.txt">capacity.3Mbps_400RTT_PER_0.0001</option>
        <option value="capacity.3Mbps_400RTT_PER_0.001.txt">capacity.3Mbps_400RTT_PER_0.001</option>
        <option value="capacity.13Mbps_200RTT_PER_0.000001.txt">capacity.13Mbps_200RTT_PER_0.000001</option>
    </select> 
</div>
<!--Wrap the custom inputs and its labels in a container so that it can be shown/hidden-->
<div id="custom">
    <label>Forward Delay: </label><input id="fd" type="number" min="0" max="1000" step="1" value ="100"/> ms
    <br/>
    <label>Reverse Delay: </label><input id="rd" type="number" min="0" max="1000" step="1" value ="100"/> ms
    <br/>
    <label>Download Capacity: </label><input id="down" type="number" min="1" max="30" step="1" value ="1"/> MBps
    <br/>
    <label>Upload Capacity: </label><input id="up" type="number" min="1" max="30" step="1" value ="1"/> MBps
    <br/>
    <label>Packet Error Rate (PER): </label><input id="per" type="number" min="0.00001" max="1" step="0.00001" value ="0.00001"/>
</div>

then assuming you have already added jQuery to the page
//dom ready handler
jQuery(function($){
    //change event handler for the checkbox
    $('#isTracefile').change(function(){
        //if it is checked set the select element's container to display else hide
        $('#cttracefile').toggle(this.checked);
        //if it is unchecked set the input element's container to display else hide
        $('#custom').toggle(!this.checked);
    }).change()
})

Demo: Fiddle

