HTML表單

input 標(biāo)簽

兩個(gè)單行文本框和一個(gè)提交按鈕的表單

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

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

直接點(diǎn)擊 Submit 按鈕, 表單數(shù)據(jù)將會(huì)被送到服務(wù)器中叫 demo_form.asp 的頁(yè)面.
請(qǐng)求網(wǎng)址為 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

直接點(diǎn)擊 Submit 后, 表單數(shù)據(jù)將會(huì)被送到服務(wù)器中叫 demo_form.asp 的頁(yè)面.
請(qǐng)求網(wǎng)址為 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>

復(fù)選框.png

fieldset 和 legend 標(biāo)簽

表單內(nèi)相關(guān)元素分組

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

表單內(nèi)相關(guān)元素分組.png

textarea 標(biāo)簽

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

復(fù)選框.png

select 和 option 標(biāo)簽

<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