[HeadFirst-HTMLCSS学习笔记][第十四章交互活动]

表单

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php"        method="POST"><p>Just type in your name (and click Submit) to enter the contest:<br>Frist name:<input type="text" name="firstname" value=""> <br>Last name:<input type="text" name="lastname" value=""> <br><input type="submit"></p></form>

• action 响应的脚本
• method 传递方式

表单元素

• <input type="text"> 提供文本输出

  <input type="text" name="fullname"> 

• <input type="submit"> 提供控件提交

  <input type="submit">

• <input type="radio"> 单选钮输入

  <input type="radio" name="hotornot" value="hot"><input type="radio" name="hotornot" value="not">

• <input type="checkbox">多选项输入

  <input type="checkbox" name="spice" value="Salt"><input type="checkbox" name="spice" value="Pepper"><input type="checkbox" name="spice" value="Garlic">

• <textarea> 文本输入框

  <textarea name="comments" rows="10" cols="48”>//初始文本</textarea>

• <select> 菜单控件

  <select name="characters">    <option value="Buckaroo">Buckaroo Banzai</option>    <option value="Tommy"> Prefect Tommy</option>    <option value="Penny">Penny Priddy</option></select>

• number<input> 数字输入

  <input type="number' min="0" max="20">

• range<input> 范围输入

  <input type="range" min="0" max="20" step="5">

• color<input> 颜色输入

  <input type="color">

• date<input> 日期输入

  <input type="date">

• email<input> emal 输入

• tel<input> 电话输入

• url<input> url输入

• • <lable> 标签

• fieldset 和 legend 框

• passwords

• file

• select multiple

• input Placeholder 输入提示

• input Required 必须输入提示

发送数据

• POST
  发到服务器

• GET
  追加到URL后面

用CSS建立表单样式