【HTML学习笔记二】HTML表单

谁践踏了优雅 2022-05-19 07:58 341阅读 0赞

文章目录

    • HTML表单
      • 严重说明！！！
      • 1：表单基本构造
        • 01 代码
        • 02 效果展示
        • 01 代码
        • 02 效果展示
      • 3：表单输入（form_input.html）
        • 01 代码
        • 02 效果展示
      • 4：表单select
        • 01 代码
        • 02 效果展示

HTML表单

严重说明！！！

以下是博主的简单get的一些的学习笔记，其中内容都是为了方便！快！自己方便以后查找来做的笔记。。。。。。

1：表单基本构造

01 代码

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>表单基本机构</title>
  7.     </head>
  9.     <body>
  10.         <ul>
  11.             <li>表单应用场景</li>
  12.             <li>表单结构</li>
  13.             <li>常用表单元素使用</li>
  14.             <li>表单交互属性</li>
  15.             <li>案例</li><br />
  16.             <hr />
  17.         </ul>
  18.         <!--
  19.             作者：jjk
  20.             时间：2018-07-23
  21.             描述：语法：
  22.                   <form>
  24.                       表单元素：文本域，单元框，复选框，按钮，列表，，，，，，
  25.                       Form标签中，以下标签实现表单元素添加
  26.                       <input>:  表单输入标签 form_input.html
  28.                       <select>: 菜单和列表标签:form_select.html
  29.                       <option>：菜单和列表项目标签：form_select.html
  31.                       <textarea>：文字域标签:form_select.html
  33.                       <optgroup>： 菜单和列表项目分组标签:form_select.html
  34.                     注意：表单本身不可见
  35.                   </form>
  38.                   <input type="类型属性" name="名称"....../>
  39.                   Type属性值                    描述
  40.                   text                文字域
  41.                   password            密码域
  42.                   file                文件域
  43.                   checkbox            复选框
  44.                   radio               单选框
  45.                   Button              按钮
  46.                   Submit              提交按钮
  47.                   Reset               重置按钮
  48.                   Hidden              隐藏域
  49.                   image               图像域
  51.                   Maxlength           指用户输入的最大字符长度
  52.                   Size                指定文本框的宽度，以字符个数为单位，文本框的缺省宽度是20个字符
  53.                   value               指定文本框的默认值
  54.                   placeholder         规定用户填写输入字段的提示
  58.         -->
  59.     </body>
  61. </html>

02 效果展示

主要看代码中注释奥！！！

###2：一个基本的表单

01 代码

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>基础表单</title>
  7.     </head>
  9.     <body>
  10.         <h2>创建一个很基础的表单</h2>
  11.         <form>
  12.             姓名：<input type="text" name="username" /><br /> 密码：
  13.             <input type="password" name="paw" /><br /> 按钮：
  14.             <input type="submit" /><br />
  16.         </form>
  17.     </body>
  19. </html>

02 效果展示

这里写图片描述

3：表单输入（form_input.html）

01 代码

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>表单input</title>
  7.     </head>
  9.     <body>
  10.         <!--
  11.               作者：912624568@qq.com
  12.               时间：2018-07-23
  13.               描述：8行2列
  14.           -->
  15.         <h1 align="center">注册信息</h1>
  16.         <hr color="#336699" />
  17.         <form>
  18.             <table width="600px" bgcolor="#f2f2f2" align="center">
  19.                 <!--8行2列-->
  20.                 <tr>
  21.                     <td>姓名：</td>
  22.                     <td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名" /></td>
  23.                 </tr>
  24.                 <tr>
  25.                     <td>邮箱：</td>
  26.                     <td><input type="text" name="email" size="25" value="@163.com" /></td>
  27.                     <!--value定义初始值-->
  28.                 </tr>
  29.                 <tr>
  30.                     <td>密码：</td>
  31.                     <td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码" /></td>
  32.                 </tr>
  33.                 <tr>
  34.                     <td>确认密码：</td>
  35.                     <td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码" /></td>
  36.                 </tr>
  37.                 <tr>
  38.                     <td>上传图片：</td>
  39.                     <td><input type="file" name="file" /> </td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>性别：</td>
  43.                     <td>男<input type="radio" name="sex1" value="man" />
  44.                         <!--value是提示按钮 只能选一个时：name=“一样的值”-->
  45.                         女<input type="radio" name="sex1" value="woman" /> 保密
  46.                         <input type="radio" name="sex1" value="bm" checked/>
  47.                     </td>
  48.                 </tr>
  49.                 <tr>
  50.                     <td>爱好：</td>
  51.                     <td>读书<input type="checkbox" name="dx1" value="read" checked/>
  52.                         <!--复选框中的name值是不受限制的 checked是默认值-->
  53.                         跳舞<input type="checkbox" name="dx1" value="dance" /> 唱歌
  54.                         <input type="checkbox" name="dx1" value="sing" />
  55.                     </td>
  56.                 </tr>
  57.                 <tr>
  58.                     <td>爱好的运动：</td>
  59.                     <td>跑步<input type="checkbox" name="dx2" value="read" checked/>
  60.                         <!--复选框中的name值是不受限制的 checked是默认值-->
  61.                         篮球<input type="checkbox" name="dx2" value="dance" /> 跳绳
  62.                         <input type="checkbox" name="dx2" value="sing" />
  63.                     </td>
  64.                 </tr>
  65.                 <tr>
  66.                     <td><input type="button" value="来点我" name="button" />
  67.                         <!---->
  68.                         <input type="submit" value="submit" name="submt" />
  69.                         <!--submit提交按钮-->
  70.                         <input type="reset" value="reset" name="reset" />
  71.                         <!--reset重置按钮-->
  72.                         <input type="image" name="image_button" src="../../img/anniu.png" />
  73.                         <!--image图片-->
  75.                     </td>
  76.                     <td></td>
  77.                 </tr>
  78.                 <tr>
  79.                     <td><input type="hidden" name="hidden" value="这是一个用户注册信息" /></td>
  80.                     <td></td>
  81.                 </tr>
  83.             </table>
  84.         </form>
  85.     </body>
  87. </html>

02 效果展示

这里写图片描述

4：表单select

01 代码

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>表单input</title>
  7.     </head>
  9.     <body>
  10.         <!--
  11.               作者：912624568@qq.com
  12.               时间：2018-07-23
  13.               描述：8行2列
  14.           -->
  15.         <h1 align="center">表单select</h1>
  16.         <hr color="#336699" />
  17.         <form action="action.php" method="post" target="_self"><!--action是用来提交表单之后处理数据的文件：后台-->
  18.             <!--
  19.                 作者： jjk
  20.                 时间：2018-07-23
  21.                 描述：
  22.                 属性：                                                          值：                                                           描述
  23.                 action                 url                    提交表单是想何处发送表单数据
  24.                 method：                                                  get：使用url传递参数
  25.                                                                                                     所发送信息的数量也有限制
  26.                  设置表单以何种方式发送到指定页面                     一般用去信息获取
  28.                                         post：表单数据作为http请求体的一部分
  29.                                                                                                     对所发送信息的数量无限制
  30.                                                                                                      一般用于修改服务器上的资源            
  32.                 name                   form_name              表单的名称
  33.                 target                 _blank,_self
  34.                                        _parent,_top           在何处打开action URL
  35.                 enctype                application/x-www-form-urlencoded
  36.                                        multipart/form-data               在发送表单数据之前如何对其进行编码
  37.                                              text/plain
  38.             -->
  40.             <table width="600px" bgcolor="#f2f2f2" align="center" border="0">
  41.                 <!--8行2列-->
  42.                 <tr>
  43.                     <td align="right">姓名：</td>
  44.                     <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名" /></td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td align="right">邮箱：</td>
  48.                     <td align="left"><input type="text" name="email" size="25" value="@163.com" /></td>
  49.                     <!--value定义初始值-->
  50.                 </tr>
  51.                 <tr>
  52.                     <td align="right">密码：</td>
  53.                     <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码" /></td>
  54.                 </tr>
  55.                 <tr>
  56.                     <td align="right">确认密码：</td>
  57.                     <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码" /></td>
  58.                 </tr>
  59.                 <tr>
  60.                     <td align="right">上传图片：</td>
  61.                     <td align="left"><input type="file" name="file" /> </td>
  62.                 </tr>
  63.                 <tr>
  64.                     <td align="right">性别：</td>
  65.                     <td align="left">男<input type="radio" name="sex1" value="man" />
  66.                         <!--value是提示按钮 只能选一个时：name=“一样的值”-->
  67.                         女<input type="radio" name="sex1" value="woman" /> 保密
  68.                         <input type="radio" name="sex1" value="bm" checked/>
  69.                     </td>
  70.                 </tr>
  71.                 <tr>
  72.                     <td align="right">爱好：</td>
  73.                     <td align="left">读书<input type="checkbox" name="dx1" value="read" checked/>
  74.                         <!--复选框中的name值是不受限制的 checked是默认值-->
  75.                         跳舞<input type="checkbox" name="dx1" value="dance" /> 唱歌
  76.                         <input type="checkbox" name="dx1" value="sing" />
  77.                     </td>
  78.                 </tr>
  79.                 <tr>
  80.                     <td align="right">爱好的运动：</td>
  81.                     <td align="left">跑步<input type="checkbox" name="dx2" value="read" checked/>
  82.                         <!--复选框中的name值是不受限制的 checked是默认值-->
  83.                         篮球<input type="checkbox" name="dx2" value="dance" /> 跳绳
  84.                         <input type="checkbox" name="dx2" value="sing" />
  85.                     </td>
  86.                 </tr>
  87.                 <tr>
  88.                     <!--
  89.                         作者：912624568@qq.com
  90.                         时间：2018-07-23
  91.                         描述：select标签属性：
  92.                               name：设置下拉菜单和列表的名称
  93.                               multiple：设置可选择多个选择
  94.                               size：设置列表中可见选项的数目
  95.                             option标签属性：
  96.                                selected：设置选项初始选中状态
  97.                                value：定值送往服务器的选择值
  98.                     -->
  99.                     <td align="right">城市：</td>
  100.                     <!--第一列-->
  101.                     <td align="left">
  102.                         <select name="city">
  103.                             <!--下拉菜单选择的形式-->
  104.                             <option value="bj">请选择</option>
  105.                             <option value="tj" selected="这是一个默认选择">天津</option>
  106.                             <option value="hb">河北</option>
  107.                             <option value="sh">上海</option>
  108.                             <option value="hn">湖南</option>
  109.                             <option value="bj">北京</option>
  110.                             <option value="tj">天津</option>
  111.                             <option value="hb">河北</option>
  112.                             <option value="sh">上海</option>
  113.                             <option value="hn">湖南</option>
  114.                         </select>
  115.                         <select name="city" size="6" multiple>
  116.                             <!--列表选择的形式：size设置， multipe多项选择-->
  117.                             <option value="bj">北京</option>
  118.                             <option value="tj">天津</option>
  119.                             <option value="hb">河北</option>
  120.                             <option value="sh">上海</option>
  121.                             <option value="hn">湖南</option>
  122.                             <option value="bj">北京</option>
  123.                             <option value="tj">天津</option>
  124.                             <option value="hb">河北</option>
  125.                             <option value="sh">上海</option>
  126.                             <option value="hn">湖南</option>
  127.                         </select>
  128.                         <select name="city" size="5" multiple="多项选择">
  129.                             <!--列表选择的形式：size设置， multipe多项选择-->
  130.                             <option>请选择</option>
  131.                             <optgroup label="华北">
  132.                                 <!--
  133.                                           作者：912624568@qq.com
  134.                                           时间：2018-07-23
  135.                                           描述：分组
  136.                                       -->
  137.                                 <option value="bj" selected="默认选择">北京</option>
  138.                                 <option value="tj">天津</option>
  139.                                 <option value="hb">河北</option>
  140.                             </optgroup>
  141.                             <optgroup label="华东">
  142.                                 <option value="sh">上海</option>
  143.                                 <option value="hn">湖南</option>
  144.                                 <option value="bj">北京</option>
  145.                             </optgroup>
  146.                             <optgroup label="西北">
  147.                                 <option value="tj">天津</option>
  148.                                 <option value="hb">河北</option>
  149.                                 <option value="sh">上海</option>
  150.                                 <option value="hn">湖南</option>
  151.                             </optgroup>
  152.                         </select>
  153.                     </td>
  154.                 </tr>
  155.                 <tr>
  156.                     <!--
  157.                         作者：912624568@qq.com
  158.                         时间：2018-07-23
  159.                         描述：<textarea>：文字域标签
  160.                             name： 设置文本区的名称
  161.                             placeholder：设置描述文本区域预期值的阶段提示
  162.                             rows：设置文本区的可见行数
  163.                             cols：设置文本区的可见宽度
  164.                     -->
  165.                     <td align="right">简介：</td>
  166.                     <td align="left"><textarea name="jj" rows="6" cols="50" placeholder="请输入文本！！！"></textarea></td>
  167.                 </tr>
  168.                 <tr>
  169.                     <td colspan="2" align="center"><input type="button" value="来点我" name="button" />
  170.                         <!---->
  171.                         <input type="submit" value="submit" name="submt" />
  172.                         <!--submit提交按钮-->
  173.                         <input type="reset" value="reset" name="reset" />
  174.                         <!--reset重置按钮-->
  175.                         <input type="image" name="image_button" src="../../img/anniu.png" />
  176.                         <!--image图片-->
  178.                     </td>
  179.                     <td></td>
  180.                 </tr>
  181.                 <tr>
  182.                     <td><input type="hidden" name="hidden" value="这是一个用户注册信息" /></td>
  183.                     <td></td>
  184.                 </tr>
  186.             </table>
  187.         </form>
  188.     </body>
  190. </html>

02 效果展示

这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML学习笔记13-HTML表单

    一、什么是表单(form) 用于收集用户信息 二、什么是表单元素 表单元素指的是不同类型的input元素。输入框、单选框、复选框、按钮等 三、input标签的常见类型

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 527 阅读