【原创】HTML&CSS学习笔记（17） --- form 表单

 

一 form基本语法

• action="url.php"                 //引用的是一个php服务器脚本，所以一般都是url，而不是本地地址
• 服务器脚本的类型 可以是    php  python  node.js  java等等
• method="post"                  // "get" 明文发送 "post"

例子：

<form action=".php" method="post">

</form>

 

1.1 get方法

• get方法会打包客户端的 表单的 变量名和 值，追加在url的最后直接发给服务器一个查询请求
• get方法把查询表单变量和值，明文附加在url最后，所以不适合私密性强的
• 一般用于发送查询数据库请求，并且可以对查询结果加标签收藏
•  

 

1.2 post 方法

• post方法会打包客户端的 表单的 变量名和 值，创建一个小的数据包，从后台发送给服务器（也就是网页上看不到任何现象）
• 私密性较强，发送私密信息
• 一般用于下登陆网站，下订单时使用
• 可容纳数据较多，比如有textarea一般用post

 

 

 

二 常用的表单类型

form包含很多可用的表单元素

2.1 基本语法规则

type=" "          //表单类型

name=" "        //服务器使用的此表单的 名字/ID

value=" "        //当前值，默认值---submit的value是按钮的显示名

 

2.2 input 是void元素, 有多种不同的属性

• 文本输入框                     <input type="text" name="fullname"  maxlength="99" placeholder="在此输入" required>                                                              //必定只有1行
• required 表示这个是必选的，必须填！！！！
• 按钮（提交按钮）          <input type="submit" name="submit" value="确认">
• 单选按钮   
• 因为没有总体的name,所以一套ratio，起名name都一样，value 表示单选的选择值。   
• <input type="radio" name="hotornot" value="hot" id="radio1">  <br>
• <input type="radio" name="hotornot" value="not" id="radio2">

 

• <input type="radio" name="hotornot" value="hot" id="hot">  <br>
• <label for="hot">hot</label>
• <input type="radio" name="hotornot" value="not" id="not">
• <label for="not">not</label>

 

• 复选框 （打勾）           
• 因为没有总体的name,所以一套checkbox，起名name都一样，value 表示单选的选择值。 
• <input  type="checkbox" name="spice[]" value="salt"  id="check1"> 
•  <input type="checkbox" name="spice[]" value="oil"   id="check2">

 

• 数字输入        <input type="number" min="0" max="99">                     //数字+-调节框
• 范围输入       <input type="range" min="0" max="99" step="1">          //范围滑动条
• 颜色输入        <input type="color" >   
• 日期输入       <input type="date" name="date">     //注意是date 而不是time
• 邮件输入      <input type="email">
• tel输入         <input type="tel">
• url输入         <input type="url">
• 密码输入     <input type="password">
• 文件输入提交   <input type="file" name="doc"> //可以提交文件
•  

 

文本输入框很多

• <input type="text" name="name"> <br>
• <input type="text" name="address"> <br>
• <input type="text" name="city"> <br>
• <input type="text" name="state"> <br>
• <input type="text" name="zip">

 

2.3 多行文本框

• 多行文本框                    <textarea name="comments" rows="10" cols="48"></textarea>

 

2.4 选择框 select 与 option (可以单选，也可以设置multiple多选菜单)

• 只需要select有名字name即可,option不需要再有 name
• <select  name="choice" id="choice" multiple>
  • <option value="张三">张三</option>
  • <option  value="李四">李四</option>
• </select>

 

2.5 label标签

<label for="hot">hot</label>

 

2.6  fieldset 和 legend

• <fieldset>
• <legend>复选框标题</legend>
• <input  type="checkbox" name="spice[]" value="salt"  id="check1"> 
•  <input type="checkbox" name="spice[]" value="oil"   id="check2">
• </fieldset>