表单的使用过程:构建表单-》配置表单-》验证表单-》服务器处理
构建表单
所有的表单都是from组成的(注意,按钮只可以是button)
<form>
<div><label>姓名:<input></label></div>
<div><label>电话:<input type="tel"></label></div>
<div><label>邮箱:<input type="email"></label></div>
<fieldset>
<legend>披萨大小</legend>
<input type="radio" name="size">小
<input type="radio" name="size">中
<input type="radio" name="size">大
</fieldset>
<fieldset>
<legend>披萨配料</legend>
<label><input type="checkbox">熏肉</label>
<label><input type="checkbox">奶酪</label>
<label><input type="checkbox">洋葱</label>
<label><input type="checkbox">蘑菇</label>
</fieldset>
<label>配送时间:<input type="time" min="11:00" max="21:00" step="900"></label>
</div>
<div>
<button >提交</button>
</div>
</form>
服务器处理接口
假设服务器需要用到的数据信息如下
-https://pizza.example.com/order
-application/x-www-form-urlencoded
-custname,custtel,custemail,size,topping,delivery
表单配置
把提交类型,属性,地址等信息加入表单,radio和chekbox因为name值是相同的,所以用value区分
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order">
<div><label>姓名:<input name="custname"></label></div><div><label>电话:<input type="tel" name="custtel"></label></div>
<div><label>邮箱:<input type="email" name="custemail"></label></div>
<fieldset>
<legend>披萨大小</legend>
<input type="radio" name="size" value="small">小
<input type="radio" name="size" value="medium">中
<input type="radio" name="size" value="large">大
</fieldset>
<fieldset>
<legend>披萨配料</legend>
<label><input type="checkbox" name="topping" value="bacon">熏肉</label>
<label><input type="checkbox" name="topping" value="cheese">奶酪</label>
<label><input type="checkbox" name="topping" value="onion">洋葱</label>
<label><input type="checkbox" name="topping" value="mushroom">蘑菇</label>
</fieldset>
<div>
<label>配送时间:<input type="time" min="11:00" max="21:00" step="900" name="delivery"></label>
</div>
<div>
<button >提交</button>
</div>
</form>
验证表单
通常一些简单的校验会在表单提交之前有前端做简单的校验,为表单的项加上required就可以了
<form method="post" enctype="application/x-www-form-urlencoded" action="https://pizza.example.com/order">
<div><label>姓名:<input name="custname" required></label></div>
<div><label>电话:<input type="tel" name="custtel" required></label></div>
<div><label>邮箱:<input type="email" name="custemail" required></label></div>
<fieldset>
<legend>披萨大小</legend>
<input type="radio" name="size" value="small" required>小
<input type="radio" name="size" value="medium">中
<input type="radio" name="size" value="large" >大
</fieldset>
<fieldset>
<legend>披萨配料</legend>
<label><input type="checkbox" name="topping" value="bacon" required>熏肉</label>
<label><input type="checkbox" name="topping" value="cheese">奶酪</label>
<label><input type="checkbox" name="topping" value="onion">洋葱</label>
<label><input type="checkbox" name="topping" value="mushroom">蘑菇</label>
</fieldset>
<div>
<label>配送时间:<input type="time" min="11:00" max="21:00" step="900" name="delivery"></label>
</div>
<div>
<button >提交</button>
</div>
</form>