[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> 标签
  • fieldsetlegend

  • passwords

  • file

  • select multiple

  • input Placeholder 输入提示

  • input Required 必须输入提示

发送数据

  • POST

    发到服务器

  • GET

    追加到URL后面

用CSS建立表单样式

上一篇:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画


下一篇:PHP上传文件示例