• HTML之表格、表单

    用

    单元格

    可以创建一个最简单的只有一行、一个单元格的表格。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML表格title>
    6. head>
    7. <body>
    10. <table align="center"border="1px"width="300px"height="200px">
    11.     
    12.     <tr align="center">
    13.         <td>单元格td>
    14.         <td>单元格td>
    15.         <td>单元格td>
    16.     tr>
    17.     <tr >
    18.         <td>单元格td>
    19.         <td>单元格td>
    20.         <td>单元格td>
    21.     tr>
    22.     <tr >
    23.         <td>单元格td>
    24.         <td>单元格td>
    25.         
    26.         <td align="center">单元格td>
    27.     tr>
    28. table>
    29.  
    30. <table border="1px"width="300px"height="200px">
    31.     <tr>
    32.         <td>单元格td>
    33.         <td>单元格td>
    34.         
    35.         <td rowspan="2">单元格td>
    36.     tr>
    37.     <tr>
    38.         <td>单元格td>
    39.         <td>单元格td>
    40.         
    41.     tr>
    42.  
    43.     <tr>
    44.         <td>单元格td>
    45.         
    46.         
    47.         <td colspan="2">单元格td>
    48.     tr>
    49.  
    50.     
    51.     <th>单元格th>
    52.     <th>单元格th>
    53.     <th>单元格th>
    54.  
    55.  
    56. table>
    57. <br>
    58.  
    60. <table border="1px">
    61.     <thead>
    62.     <tr>
    63.         <td>单元格td>
    64.     tr>
    65.     thead>
    66.  
    67.     <tbody>
    68.     <tr>
    69.         <td>单元格td>
    70.     tr>
    71.     tbody>
    72.  
    73.     <tfoot>
    74.     <tr>
    75.         <td>单元格td>
    76.     tr>
    77.     tfoot>
    78.  
    79.  
    80. table>
    81.  
    82. body>
    83. html>

            用

    可以创建一个表单。

            表单可以用来收集用户的数据，提交表单时，可以向服务器发送请求，并且还可以携带用户填写的数据。

    form标签的属性：

            action属性用来指定请求路径，也就是说数据提交的时候，提交给谁。action属性和超链接的href属性相同，都是提供“请求路径”的。

    method属性用来指定表单提交的方式，常见的有两种：

             get方式提交：提交的时候，提交的数据会直接显示在浏览器的地址栏上

             post方式提交：提交的时候，提交的数据不会直接显示在浏览器的地址栏上

     当method缺省的时候，默认采用get方式提交。只有当method设置为post的时候，表单才会采用post方式提交。当使用超链接，或者直接在浏览器地址栏上输入URL，这些都是get请求

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表单title>
    6. head>
    7. <body>
    9. <form action="http://www.baidu.com" method="get">
    11.     
    12.     <input type="submit" value="百度"/>
    13.     <br>
    14.     
    15.     <input type="button" value="百度按钮"/>
    16. form>
    17. <br>
    19. <input type="submit" value="百度2"/>
    20. <br>
    22. <button>我是一个按钮对象button>
    23. body>
    24. html>

             input标签是form表单中非常重要的输入域控件，所有的输入域控件都是用来收集用户的数据。用户实际上就是向输入域控件中输入数据的

    input标签中最常用的属性是type属性，type属性用来设置输入域控件展示的样式：

            text 文本框

            password 密码框

            radio 单选按钮

            checkbox 复选框

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表单2title>
    6. head>
    7. <body>
    8. <form action="http://localhost:8080/oa/login" method="get">
    9. <h2>user loginh2>
    10. <hr>
    12. username:  <input type="text" name="yonhuming"/><br>
    14. password:  <input type="password" name="mima"/><br>
    15.  
    18. <input type="submit" value="login"/>
    19. form>
    21. body>
    22. html>

    注册表单：

    以下是一个注册/提交简历的案例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>注册表单title>
    6. head>
    7. <body>
    8. <form action="http://localhost:8080/oa/register" method="get">
    9.     
    10.     用户名 <input type="text" name="username"/><br>
    11.     
    12.     密码 <input type="password" name="password"/><br>
    13.     性别
    14.     
    15.     男<input type="radio" name="sex" value="1"/>
    16.     女<input type="radio" name="sex" value="0"/>
    17.     <br>
    18.  
    19.     学历
    20.     
    21.     <select name="grade">
    22.         
    23.         <option value="">--请选择学历--option>
    24.         <option value="1">高中option>
    25.         <option value="2">大专option>
    26.         <option value="3">本科option>
    27.         <option value="4">硕士option>
    28.     select>
    29.     <br>
    30.     兴趣
    31.     
    32.     打篮球<input type="checkbox" name="aihao" value="ba"/>
    33.     踢足球<input type="checkbox" name="aihao" value="foot"/>
    34.     羽毛球<input type="checkbox" name="aihao" value="yu"/>
    35.     <br>
    36.     简介
    37.     
    38.     <textarea rows="10" cols="60" name="jianjie">textarea>
    39.     <br>
    40.     
    41.     <input type="submit" value="注册"/>
    42.     
    43.     <input type="reset" value="重置"/>
    44.  
    45.     <br>
    46.     
    47.     省份：
    48.     <select name="province" size="4" multiple>
    49.         <option value="">--请选择省份--option>
    50.         <option value="1">湖南省option>
    51.         <option value="2">湖北省option>
    52.         <option value="3">河南省option>
    53.         <option value="4">河北省option>
    54.         <option value="5">山西省option>
    55.         <option value="6">陕西省option>
    56.     select>
    57.  
    58. form>
    59. body>
    60. html>
  • 相关阅读:
    C++基础知识（十四）--- vector容器
    软件开发平台流辰信息如何为客户分忧解难？
    宝贝快出生的这三个表现,孕妈尽快去医院待产
    微信小程序本地开发
    WSL2-ubuntu18.04配置笔记1：WSL2-ubuntu系统迁移
    蓝牙运动耳机排行榜，目前排名最好的运动耳机推荐
    linux文件输入输出的重定向
    【PostgreSQL15-beta1版本系统表、系统视图、等待事件变化】
    Flink系列文档-(YY07)-Flink编程API-process function
    Docker镜像构建之Dockerfile
  • 原文地址：https://blog.csdn.net/qq_62731133/article/details/127595327