码云社 | 砺锋科技-html之表单标签

html之表单标签

发布时期：2019-7-22 18:59

阅读：467 回复：0

收藏分享邀请

1.表单标签：概念：用于采集用户输入的数据，用户服务器进行交互form标签：form/form属性：action:提交的路径地址method:提交的方式(get,post)get和post的区别：(1)get提交将数据加在地址栏的后面，post提交将数据封 ...

1.表单标签：

概念：用于采集用户输入的数据，用户服务器进行交互

form标签：<form></form>

属性：

action:提交的路径地址

method:提交的方式(get,post)

get和post的区别：
    (1)get提交将数据加在地址栏的后面，post提交将数据封装在请求体中
    (2)get提交相对不安全；post提交相对安全
    (3)get提交有大小限制，根据浏览器不同而不同；post不限制大小

2.input标签：<input />

type属性:根据type属性实现各种不同功能的表单项；
text：普通的文本输入框；
name：username value="张三"设置默认值
password：密码输入框；特点是显示的是掩码
radio：单选按钮
name：如果想让一组单选按钮互斥，就用指定同样的name属性值，需要加value属性值；
checked：默认被选中；
checkbox：复选框；
name：组的概念，需要加value属性值。
checked：默认被选中；
file：上传文件的控件
button：普通按钮，没有任何内置的功能；
submit：内置功能，点击会按照action地址提交
reset：重置，点击会清空之前填写的内容
image：图片按钮，功能类似与submit
src：加载图片
alt:图片的提示文字
hidden:隐藏表单，作用是在提交数据的时候，服务器需要这个数据，但是不需要用户看到。
注意：name属性必须要写。

3、select标签(<select></select>)：下拉菜单
  属性：
name;表单项的名称
  option标签：可选项（下拉菜单之间的级联）
   value，表单项的值
   selected：默认被选中

4、textarea:文本域标签
  属性：
   cols：列数
   rows：行数
  注意：默认的文本值在标签体当中

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <form name="studnet" action="#" method="get">
   <table >
    <tr>
     <td>
      账号
     </td>
     <td>
      <input type="text" name="username" value=""/>
     </td>
    </tr>
    <tr>
     <td>
      密码
     </td>
     <td>
      <input type="password" name="pwd" value="" />
     </td>

    </tr>
    <tr>
     <td>
      学历
     </td>
     <td>
      <input type="radio" name="xueli" value="" />大专
      <input type="radio" name="xueli" value="" checked="checked"/>本科
      <input type="radio" name="xueli" value="" />研究生
     </td>
    </tr>
    <tr>
     <td>
      选修科目
     </td>
     <td>
      <input type="checkbox" name="kemu" value="java" />JAVA
      <input type="checkbox" name="kemu" value="PYTHON" />PYTHON
      <input type="checkbox" name="kemu" value="ANDROID" />ANDROID
      <input type="checkbox" name="kemu" value="C++" />C++
     </td>
    </tr>
    <tr>
     <td>
      所在学校
     </td>
     <td>
      <select>
       <option value="beida">北大</option>
       <option value="qinghua">清华</option>
       <option value="fudan">复旦</option>
       <option value="jiaoda">交大</option>
       <option value="guangcai">广财</option>
      </select>
     </td>
    </tr>
    <tr>
     <td>
      备注
     </td>
     <td>
      <textarea name="beizhu" cols="30" rows="20" >this is my page！</textarea>
     </td>
    </tr>
    <tr>
     <td></td>

     <td>
      <input type="reset" value="重置" />
     </td>
    </tr>
    <tr>
     <td></td>

     <td>
      <input type="image" src="../images/btn.gif" alt="图片提示词"/>
     </td>
    </tr>
   </table>
  </form>
</body>
</html>