• HTML-form表单

    一、效果展示

    二、知识点储备

    1. form标签就是表单
    2. input type=text 是文件输入框 value设置默认显示内容
    3. input type-password 是密码输入框 value设置 献认显示内容
    4. input type-radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
    5. input type=checkbox 是复选框 checked="checked"表示默认选中
    6. input type-reset 是重置按钮 value属性修改按钮上的文本
    7. input type=submit 是提交按钮 value属性修改按钮上的文本
    8. input type=button 是按钮 value属性修改按钮上的文本
    9. input type=file 是文件上传域
    10. input type=hidden 是隐藏域  当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用
    11. select标签是下拉列表框 option标签是下拉列表框中的选项selected="selected"设 置默认选中
    12. textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值). rows属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度

     三、我知道你会了，实战起飞

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <form >
    9.     用户名：<input type="text" value="默认值"/><br/>
    10.     密码：<input type="password" value="123"/><br>
    11.     确认密码：<input type="password"  value="123"/><br>
    12.     性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex" checked = "checked" />女<br>
    13.     兴趣爱好：<input type="checkbox" checked = "checked" />唱、跳、rap <input type="checkbox" />打篮球 <br>
    14.     国籍：<select >
    15.   <option >---请选择省份----option>
    16.   <option selected="selected">山东option>
    17.   <option >江苏option>
    18.   <option >河北option>
    19.         select> <br>
    20.   自我评价: <textarea rows="10" cols="20">点个赞吧！（我是默认值）textarea> <br/>
    21.   <input type= "reset" value="abc" />
    22.   <input type="submit"/>
    23.   <input type="file" />
    24.   <input type="hidden" />
    25. form>
    26. body>
    27. html>

    四、你的效果展示太丑了吧！

    行，这个总算整齐了吧！

     这样比较工整的显示只需要将表单代码信息放到表格中

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <form>
    9.     <h1 align="center">用户注册h1>
    10.     <table align="center">
    11.         <tr>
    12.             <td>用户名称：td>
    13.             <td><input type="text" value="默认值"/>td>
    14.         tr>
    15.         <tr>
    16.             <td>用户密码：td>
    17.             <td><input type="password" value="123456"/>td>
    18.         tr>
    19.         <tr>
    20.             <td>确认密码：td>
    21.             <td><input type="password" value="123456"/>td>
    22.         tr>
    23.         <tr>
    24.             <td>性别：td>
    25.             <td>
    26.                 <input type="radio" name="sex" checked="checked">男
    27.                 <input type="radio" name="sex">女
    28.             td>
    29.         tr>
    30.         <tr>
    31.             <td>兴趣爱好：td>
    32.             <td>
    33.                  <input type="checkbox" checked="checked"/>唱
    34.         <input type="checkbox"/>跳
    35.         <input type="checkbox"/>rap
    36.         <input type="checkbox"/>篮球
    37.       td>
    38.     tr>
    39.     <tr>
    40.       <td>省份：td>
    41.       <td>
    42.         <select>
    43.           <option>---请选择省份---option>
    44.           <option selected="selected">山东option>
    45.           <option>河北option>
    46.           <option>江苏option>
    47.         select>
    48.             td>
    49.         tr>
    50.         <tr>
    51.             <td>自我评价：td>
    52.             <td><textarea rows="10" cols="20">默认值textarea>td>
    53.         tr>
    54.         <tr>
    55.             <td align="center"><input type="reset"/>td>
    56.             <td align="center"><input type="submit"/>td>
    57.             <td><input type="hidden" name="admin" value="admin"/>td>
    58.         tr>
    59.     table>
    60. form>
    61. body>
    62. html>

    五、表单提交细节

    知识点添加：

    form标签中：
            action属性设置提交的服务器地址
            method属性设置提交的方式GET（默认值）或post

    表单提交的时候，数据没有发送给服务器的三种情况：
                1、表单项没有name属性
                2、单选、复选、下拉列表中的option标签，都要添加value属性，以便发给服务器
                3、表单项不在提交的form标签中

     get和post提交：

     get请求的特点是：
                1、浏览器地址栏中的地址是：action属性[+?+请求参数]
                    参数格式是：name=value&name=value
                2、不安全
                3、数据长度的限制
    post请求的特点是：
                1、浏览器地址栏中只有action属性值
                2、相对于get请求要安全
                3、理论上没有数据长度的限制

  • 相关阅读:
    [附源码]java毕业设计价格公示系统
    h3C交换机禁止VLAN互访方法
    go中context初始使用
    leetcode分类刷题：队列（Queue）（三、优先队列用于归并排序）
    零零信安-D&D数据泄露报警日报【第30期】
    apt update和apt upgrade命令 - 有什么区别？
    网络安全-Diffie Hellman密钥协商
    python安装
    Element UI 多选表格【翻页多选】简易版（不支持翻页多选数据反显）
    寒假训练——第二周（BFS）
  • 原文地址：https://blog.csdn.net/weixin_63003502/article/details/126926460