ドロップダウンメニューWordPressのウィジェット

Question

<form id="promacform" onsubmit="return protein_calculator(this);" method="post"> 
    Weight: <input type="text" name="protein_weight" id="protein_weight" size="5"; /> lbs.<br /> 
    Activity level (1.1-1.4): <input type="text" name="protein_activity" id="protein_activity" size="5"; /> <br /> 
    <br><input type="submit" name="submit" id="submit" value="Calculate" /><br /> 
    <div id="protein_result"></div> 
</form> 

イム：

2. （適度な運動が、定住仕事）軽くアクティブ適度にアクティブに（
3. ）適度な運動とアクティブなジョブ（非常にアクティブな激しい運動が、定住仕事）
4. エクストラアクティブ（激しい運動やアクティブなジョブ）

これは設定方法がわからないため、ユーザーは1.1-1.4（活動レベル範囲）の数値を入力する必要があり、そこから計算する必要があります。私のコメントから

Answer 1

、あなたはおそらくちょうどこれをしたい：

<label>Activity level 
<select name="protein_activity"> 
    <option value="1.1">Lightly Active</option> 
    <option value="1.2">Moderately Active</option> 
    <option value="1.3">Very Active</option> 
    <option value="1.4">Extra Active</option> 
</select> 
</label> 

あなたが興味がある可能性が別の可能性がrangeスライダーですが、フォームが1から送信することを対応するために、あなたのPHP側を変更する必要があります - の代わりに1.1 - 1.4のユーザーエクスペリエンスを追加する可能性があります。これはrangeの素早く汚れた例です。注：rangeはHTML5でのみご利用可能です：

<style> 
input[type=range] { 
    width: 300px; 
} 
ul.ranger { 
    width: 300px; 
    display: table; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.ranger li { 
    display: table-cell; 
    text-align: center; 
    width: 75px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    padding: 0; 
} 
ul.ranger li:last-child { 
    text-align: right; 
} 
ul.ranger li:first-child { 
    text-align: left; 
} 
</style> 
<form> 
<input type="range" min="1" max="4" value="2" id="slider" name="protein_activity"> 
<ul class="ranger"> 
    <li>Light</li> 
    <li>Moderate</li> 
    <li>Heavy</li> 
    <li>Extreme</li> 
</ul> 
</form>