09-HTML-form标签

时间：2021-04-14 08:20:21

<html>
 <head>
  <title>form标签学习</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <!--
   form表单标签学习：
    作用：收集并提交用户数据给指定的服务器
    属性：
     action：收集的数据提交地址也就是URL
     method：收集的数据的提交方式
      get：适合小量数据，表单数据以?隔开拼接在URL后面，不同的键值对使用&符号隔开，不安全。
      post：适合大量数据，安全，隐式提交。
     注意1：form标签会收集其标签内部的数据。
     注意2：
      表单数据提交，要提交的表单项必须拥有name属性值，否则不会提交。
      并且提交的表单项数据为键值对，键为name属性的值，值为用户书写的数据
     注意3：form表单的数据提交需要依赖于submit提交按钮。
   form表单域标签：
    作用：给用户提供进行书写或者选择的标签。
    使用：
     文本框：
      input
       type：
        text：收集少量的文本数据，用户可见 。
        password：收集用户密码数据
       name：数据提交的键，也会被js使用
       value：默认值
     单选框：
      input
       type：
        radio
       name:name属性值相同的单选框只能选择一项数据
       value：是要提交的数据
       checked：checked使用此属性的单选默认是选择状态
    
   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 />
   <input type="submit" value="登录"/>
   
   
  </form>
  
 </body>
</html>

相关文章