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