[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建立表单样式