Web从小白到大神Day04 2020.10.9

最新推荐文章于 2024-10-07 16:30:40 发布

独饮敌敌畏丶

最新推荐文章于 2024-10-07 16:30:40 发布

阅读量145

点赞数

分类专栏： Web前端学习文章标签： html

本文链接：https://blog.csdn.net/afdafvdaa/article/details/108972256

版权

Web前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML表单的用途，如何使用form标签创建表单并指定action属性来提交数据给服务器。通过多个示例展示了表单数据的提交格式，并讲解了name属性的重要性。此外，还提到了用户注册页面的实战应用以及表单其他控件的初步探讨。

摘要由CSDN通过智能技术生成

表单

1.表单有什么用处？

收集用户信息，表单展现之后，用户填写表单，点击提交按钮提交数据给服务器

2.使用

使用form标签画表单。
表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。

和超链接中的href属性一样，都可以向服务器发送请求（request）

3.使用示例1.0

<form action="http://191.222.222.2:8080/a/a">
   <!--画一个提交按钮，这个按钮可以提交表单-->
   <!--画按钮可以使用input输入域 type="submit的时候表示该按钮是一个提交按钮，具有提交表单的能力"-->
   <!--对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息-->
   <input type="submit" value="注册"/>
   <!--这是一个普通按钮，不具备提交表单的能力-->
   <input type="button" value="设置按钮上显示的文本"/>
  </form>

3.使用示例2.0

<!--这个按钮和普通的超链接没什么太大的区别，
   超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据-->
  <form action="http://www.baidu.com">
   <input type="submit" value="百度">
  </form>

3.使用示例3.0

①没有name，表单就无法提交该数据。也就是说表单项写了name属性的，一律会把数据提交给服务器。不想提交这一项，就不要写name属性
②提交数据的格式
点击提交后，浏览器地址栏会显示类似http://localhost:8888/jd/login?username=sdasda&userpwd=sdsada
所以表单是以这种格式提交数据给服务器的
action?.name=value&name=value&name=value…

这是W3C的HTTP协议规定的，必须以这种格式提交数据给服务器

③文本框和密码框的value不需要程序员指定，用户输入什么，value就是什么。当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器

<!--这是普通形式-->
  <form action="http://localhost:8888/jd/login">
   用户名<input type="text" name="username"/><br>
   密码<input type="password" name="userpwd"/><br>
   <input type="submit" value="提交">
  </form>
  <!--这是表格形式-->
  <form action="http://localhost:8888/jd/login">
   <table>
    <tr>
     <td>用户名</td>
     <td><input type="text" name="username"/></td>
    </tr>
    <tr>
     <td>密码</td>
     <td><input type="password" name="userpwd"></td>
    </tr>
    <tr align="center">
     <td colspan="2">
      <input type="submit"value="登录">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" value="清空">
     </td>
     
    </tr>
   </table>
  </form>

4.用户注册页面实战

<!DOCTYPE html>
<html>
 <head>
  <title>用户注册页面</title>
 </head>
 <body>
  <!--用户名
   密码
   确认密码
   性别
   兴趣爱好
   学历
   简介
   
   form表单method属性：
    get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
    post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上，但是数据格式和get还是一样的。
    当用户提交的信息中含有敏感信息例如密码，建议采用post方式提交
    method属性默认是get
  -->
  <form action="http://localhost:8888/jd/register">
   用户名<input type="text" name="username"/><br>
   密码<input type="password" name="userpwd"/><br>
   确认密码<input type="password"/><br><!--这里不用写name-->
   性别
   <input type="radio" name="gender" value="1"/>男
   <input type="radio" name="gender" value="0"/>女
   <!--如果想默认一个，那就在属性栏加上checked-->
   <br>
   兴趣爱好
   <input type="checkbox" name="interest" value="smoke"/>抽烟
   <input type="checkbox" name="interest" value="drink"/>喝酒
   <input type="checkbox" name="interest" value="fireHair"/>烫头
   <br>
   学历
   <select name="grade">
    <option value="gz">高中</option>
    <option value="dz">大专</option>
    <option value="bk" selected>本科</option>
    <option value="ss">硕士</option>
   </select>
   <br>
   简介
   <textarea rows="10" cols="60" name="introduce"></textarea>
   <br>
   <input type="submit" value="提交"/>
   <input type="reset" value="清空"/>
  </form>
 </body>
</html>
<!--http://localhost:8888/jd/register?username=asdsada&userpwd=sadsadsa&gender=1&interest=smoke&interest=drink&interest=fireHair&grade=dz&introduce=asdsadadawd-->

5.表单的其他控件①

<!DOCTYPE html>
<html>
 <head>
  <title>下拉列表实现多选&file&hidden（隐藏域）</title>
 </head>
 <body>
  <form action="http://localhost:8888/jd/register">
   学历
   <!--multiple是支持多选的，size设置显示条目数量-->
   <select name="grade" multiple="multiple" size="2">
    <option value="gz">高中</option>
    <option value="dz">大专</option>
    <option value="bk">本科</option>
    <option value="ss">硕士</option>
   </select>
   <!--文件上传专用-->
   <input type="file"/>
   <!--隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器。如果不得不提交某个数据，而且这个数据不想被用户看到，就可以用到这个
    如果用hidden，一般method用post-->
   <input type="hidden" name="userid" value="111"/>
  </form>
 </body>
</html>

5.表单的其他控件②

<!DOCTYPE html>
<html>
 <head>
  <title>readonly disabled</title>
 </head>
 <body>
  <form action="http://localhost:8888/jd/register">
   <!--readonly 和 disabled
    都是只读，不能修改
    但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）-->
    用户代码<input type="text" name="usercode" value="110" readonly/>
    <br>
    用户姓名<input type="text" name="username" value="zhangsan" disabled/>
    <br>
    <input type="submit" value="提交数据"/>
                <!--maxlength是设置文本框中可输入的字符数量-->
    <input type="text" maxlength="3">
  </form>
 </body>
</html>