HTML08_htm-008707-hpbzf-CSDN博客

本文链接：https://blog.csdn.net/weixin_44272266/article/details/105279559

HTML学习之form标签

讲解与举例

<html>
 <head>
  <title>form标签学习</title>
  <meta charset="UTF-8"/>
 </head>
 <body>
  <!--
   form表单标签学习:
    作用:收集并提交用户数据给指定服务器
    属性:
     action:收集的数据提交地址（URL）
     method:收集的数据的提交方式
      get :适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.
      post:适合大量数据,安全,隐式提交
     注意1:
      表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.
      提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据
     注意2:form标签会收集其标签内部的数据
     注意3:form表单的数据提交需要依赖于submit提交按钮.
   form表单域标签学习:
    作用:给用户提供可以进行数据书写或者选择的标签.
    使用:
     文本框:
      input
       type:
        text  收集少量的文本数据,用户可见
        password  收集用户密码数据
       name:数据提交的键,也会被js使用
       value: 默认值
     单选框:
      input
       type:
        radio
       name:name属性值相同的单选框只能选择一项数据
       value:要提交的数据
       checked:checked 使用此属性的单选默认是选择状态
     多选框:
      input:
       type:
        checkbox
       name:一个多选组需要使用相同的name属性值
       value:要提交的数据
       checked:checked 使用此属性的多选框默认是选择状态
     单选下拉框:
      select:
       name:数据提交的键名,必须声明
       子标签option:一个option标签表示一个下拉选项
          value:要提交的数据
     文本域:
      textarea:声明一个可以书写大量文字的文本区域
       name:数据提交的键名,js和css也会使用
       rows:声明文本域的行数
       cols:声明文本域的列数
     普通按钮:
      input:
       type:
        button
       value:
     隐藏标签:
      input
       type:
        hidden
       name
       value
     注意:表单数据提交提交的是表单域标签的value值 
   form表单标签的使用:
    在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式
    提交给action属性所指明的提交地址.
  -->
  <h3>form标签学习</h3>
  <hr />
   <form action="#" method="get">
    用户名:<input type="text" name="uname" value="小灰"/><br />
    密码: <input type="password" name="upwd"/><br />
    性别  :  男<input type="radio" name="sex" value="1" checked="checked"/>  女<input type="radio" name="sex" value="0"/><br />
    爱好: <br />
     吃饭<input type="checkbox" name="fav" value="1" checked="checked"/><br />
     睡觉<input type="checkbox" name="fav" value="2" checked="checked"/><br />
     打豆豆<input type="checkbox" name="fav" value="3"/><br />
    籍贯:<br />
     <select name="address">
      <option value="">--请选择--</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3" selected="selected">邯郸</option>
     </select>
     <br />
    文本域:<br />
     <textarea name="intro" rows="10" cols="30"></textarea><br />
    普通按钮:<br />
     <input type="button" id="" value="普通按钮" />
    隐藏标签:
     <input type="hidden" name="hidden" id="" value="哈哈" />
    <input type="submit" value="登录"/>
   </form>
 </body>
</html>