HTML表單

input 標簽

兩個單行文本框和一個提交按鈕的表單

<form action="demo_form.asp" method="get">
    First name: <input type="text" name="fname" value="Liu"><br>
    Last name: <input type="text" name="lname" value="xue"><br>
    <input type="submit" value="Submit">
</form>

兩個單行文本框和一個提交按鈕的表單.png

直接點擊 Submit 按鈕, 表單數據將會被送到服務器中叫 demo_form.asp 的頁面.
請求網址為 http://127.0.0.1/demo_form.asp?fname=Liu&lname=xue

單選框

<form action="demo_form.asp" method="get">
    <input type="radio" name="gender" id="male" value="male">Male<br>
    <input type="radio" name="gender" id="female" value="female" checked="checked">Female<br>
    <input type="radio" name="gender" id="other" value="other">Other<br><br>
    <input type="submit" value="Submit">
</form> 

單選框.png

直接點擊 Submit 后, 表單數據將會被送到服務器中叫 demo_form.asp 的頁面.
請求網址為 http://localhost/demo_form.asp?gender=female

<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car" checked="checked">I have a car<br>
    <input type="submit" value="Submit">
</form>

復選框.png

fieldset 和 legend 標簽

表單內相關元素分組

<form>
    <fieldset>
        <legend>Personalia:</legend>
        Name:<input type="text"><br>
        Email:<input type="text"><br>
        Date of birth:<input type="text">
    </fieldset>
</form>

表單內相關元素分組.png

textarea 標簽

<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>  

復選框.png

select 和 option 標簽

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

下拉刷新.png

<select size="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

safari效果.png

firefox效果.png