If Then Else用于我的简单HTML表单

If-Then-Else for my simple HTML form

本文关键字：简单 HTML 表单 我的 用于 Then Else If      更新时间：2023-09-26

我已经设置了一个服务器，它将以下表单发送到客户端，并尝试接收提交的信息。如何尽可能简单地添加If Else？我需要说的是，如果启用了"使用跟踪文件"，那么显示下拉框，否则，显示自定义输入，以便用户可以输入他/她的号码？我的第二个担忧是，这种形式看起来不太美观。我如何使它对齐，所有输入框都对齐，等等？

    <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>

如果你能对进行一些小的标记更改，我认为你可以很容易地解决它

<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>

然后假设您已经将jQuery添加到页面中

//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()
})

演示：Fiddle

<script type="text/javascript">
var traceFileEnabled = true;
if (traceFileEnabled === true) {
     var ddlbEl = document.createElement("select");
     ddlbEl.id = "theDropDown";
     document.body.appendChild(ddlbEl);
     document.getElementById("theDropDown").setAttribute("option", "selection 1");
     document.getElementById("theDropDown").setAttribute("option", "selection 2");
     document.getElementById("theDropDown").setAttribute("option", "selection 3");
}
</script>

这就是你要找的吗？

相关文章：