【Web开发】第二弹：HTML表单详解

最新推荐文章于 2025-04-14 18:24:35 发布

技术瞭望台

最新推荐文章于 2025-04-14 18:24:35 发布

阅读量540

点赞数 12

分类专栏： web开发文章标签： java css html5 html vue.js javascript react.js

本文链接：https://blog.youkuaiyun.com/2301_80237574/article/details/142882285

版权

web开发专栏收录该内容

5 篇文章

订阅专栏

form表单标签

1.单独存在没有意义，需要借助于子标签

2.form表示表单标签，常见属性：

1)action="提交数据的服务器地址"
2)method="提交后台服务器的数据的提交方式或者请求方式"

     <!--
            1.form标签常见属性：
                1)action="提交数据的服务器地址"
                2)method="提交后台服务器的数据的提交方式或者请求方式"
            2.method的属性值：get  post
                get请求：
                    1)不安全的
                    2)提交后台服务器的数据位于url后面
                        http://127.0.0.1:端口号/资源?username=zhangsan&password=1234
                    3)传输数据大小具有限制
                    4)只能传输字符数据
                post请求：http://127.0.0.1:端口号/资源
                    1）安全的
                    2）提交后台的数据位于请求体中 复习
                    3）传输的数据没有大小限制
                    4）可以传输字符数据，字节数据
             3.如果数据想要别提交到指定的后台服务器，那么数据必须书写在form标签的文本中
      -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        1.form标签常见属性：
            1)action="提交数据的服务器地址"
            2)method="提交后台服务器的数据的提交方式或者请求方式"
        2.method的属性值：get  post
            get请求：
                1)不安全的
                2)提交后台服务器的数据位于url后面
                    http://127.0.0.1:端口号/资源?username=zhangsan&password=1234
                3)传输数据大小具有限制
                4)只能传输字符数据
            post请求：http://127.0.0.1:端口号/资源
                1）安全的
                2）提交后台的数据位于请求体中 复习
                3）传输的数据没有大小限制
                4）可以传输字符数据，字节数据
         3.如果数据想要别提交到指定的后台服务器，那么数据必须书写在form标签的文本中
    -->
    <!--<form action="#" method="get">-->
    <form action="#" method="post">

    </form>


</body>
</html>

input标签

<!--
    input标签：
        1.属性：
            1)type,属性值：
                【1】 text 默认的，表示文本
                【2】 password 表示密码框
                【3】 radio 单选按钮，只能选一个
                【4】 checkbox 复选框，多选
                【5】 file  上传文件
                【6】 hidden 隐藏域 在实际开发中如果需要提交到后台服务器，但是页面上不显示的数据可以放到隐藏域中
                【7】 image 表示图片  了解
                【8】 submit 提交表单数据
                【9】 reset 重置按钮
                【10】 button 按钮
            2) name属性
                【1】用在单选按钮中，name属性值要一致，这样就可以实现单选按钮只能选择一个
                【2】name属性值在实际开发中一定要书写，这样后台服务器可以根据name属性值获取输入项对应的数据
            3) src属性：结合type属性值image一起使用，引入图片
            4) value属性
                【1】在type属性值submit reset button中表示显示的内容
                【2】表示输入项输入的值，可以不写，那么就是输入项输入的值，也可以写，后台获取的是输入项中的值
            5) checked属性：
                使用在单选按钮和复选框中表示被选中
                    <input type="checkbox" checked="checked">篮球
                    <input type="checkbox" checked>登山
            6) disabled : 使用在单选按钮和复选框中表示不能操作
            7) readonly:使用在输入框中 text password 表示只读
            8) size:输入框大小
            9) maxlength：允许输入的字符的最大长度
-->

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    input标签：
        1.属性：
            1)type,属性值：
                【1】 text 默认的，表示文本
                【2】 password 表示密码框
                【3】 radio 单选按钮，只能选一个
                【4】 checkbox 复选框，多选
                【5】 file  上传文件
                【6】 hidden 隐藏域 在实际开发中如果需要提交到后台服务器，但是也没不显示的数据可以放到隐藏域中
                【7】 image 表示图片  了解
                【8】 submit 提交表单数据
                【9】 reset 重置按钮
                【10】 button 按钮
            2) name属性
                【1】用在单选按钮中，name属性值要一致，这样就可以实现单选按钮只能选择一个
                【2】name属性值在实际开发中一定要书写，这样后台服务器可以根据name属性值获取输入项对应的数据
            3) src属性：结合type属性值image一起使用，引入图片
            4) value属性
                【1】在type属性值submit reset button中表示显示的内容
                【2】表示输入项输入的值，可以不写，那么就是输入项输入的值，也可以写，后台获取的是输入项中的值
            5) checked属性：
                使用在单选按钮和复选框中表示被选中
                    <input type="checkbox" checked="checked">篮球
                    <input type="checkbox" checked>登山
            6) disabled : 使用在单选按钮和复选框中表示不能操作
            7) readonly:使用在输入框中 text password 表示只读
            8) size:输入框大小
            9) maxlength：允许输入的字符的最大长度
-->
<form action="#">
    用户名<input type="text" name="username" value="柳岩" readonly size="10px"/><br>
    用户名<input name="username2" maxlength="3"/><br>
    密码<input type="password" name="password"/><br>
    性别：
    <input type="radio" name="sex" checked="checked" disabled>男
    <input type="radio" name="sex" >女
    <br>
    爱好：
    <input type="checkbox" checked disabled>登山
    <input type="checkbox" checked="checked" disabled="disabled">篮球
    <input type="checkbox">习武
    <input type="checkbox">皮划艇
    <br>
    您上传的种子文件：<input type="file"/>
    <br>
    <input type="hidden" value="iaiauauayyayay">
    <br>
    <!--<input type="image" src="../img/mm.jpg"/>-->
    <input type="submit" value="注册">
    <br>
    <input type="reset">
    <br>
    <input type="button" value="登录">
</form>
</body>
</html>

小结：

input标签：
        1.属性：
            1）type:表示input标签表示的类型，具有如下属性值：
                a:text 表示文本，默认的
                b:password 表示密码框 自动加密
                c:radio 表示单选按钮，只能选择一个
                d:checkbox:复选框，多选
                e:file:上传的文件
                f:hidden:表示隐藏域，页面上确实存在，但是用户看不到。
                    应用场景：修改商品 删除商品 lakakj1981829191
                g:image:引入图片 一般使用img标签引入图片 了解。
                 这里可以将页面的图片提交到后台服务器
                h:submit:提交表单中的数据到后台服务器
                i:reset:重置，重新输入
                j:button: 按钮

            2）name:
                a:对于单选按钮，我们必须给一个name属性，并且name属性值要一致，这样才可以实现单选
                b:开发中对于name属性我们一定要书写，并且name属性值要和后台即java代码中的标准类中的成员变量名一致
            3）value：
                a:对于input标签中的type属性值：submit  reset  button 可以修改页面显示的内容，显示value中的内容
                b:对于input标签的value属性，我们可以书写可以不书写，对于输入框一般不书写，提交后台服务器的数据就是输入框的数据.
                对于input其他的内容一般都书写value
            4）checked="checked" 属性：针对单选按钮和复选框的，表示默认被选中
            5）readonly="readonly" 属性：针对输入框的，表示只读，不能修改
            6) disabled="disabled" :针对单选按钮和复选框，表示不能操作
            7)size="30px" 表示输入框大小 了解
            8）maxlength="5" 输入框输入的最多的字符个数  了解

下拉列表标签：<select>

  <!--
        下拉列表标签：select,单独存在没有意义，需要借助子标签option
            1.子标签 option表示下拉框的选项
            2.子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么
            提交后台的就是文本值
            3.子标签option的selected属性表示被选中
            4.select标签的属性：
                1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值
                2) size="2" 每次select标签中显示2个子标签option
                3）multiple 表示可以显示多个option

   -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        下拉列表标签：select,单独存在没有意义，需要借助子标签option
            1.子标签 option表示下拉框的选项
            2.子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么
            提交后台的就是文本值
            3.子标签option的selected属性表示被选中
            4.select标签的属性：
                1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值
                2) size="2" 每次select标签中显示2个子标签option
                3）multiple 表示可以显示多个option

    -->
    <form action="#">
        <!--<select name="city" size="2">-->
        <select name="city" multiple>
            <option value="">-----------请选择-------------</option>
            <option value="sh">上海</option>
            <option value="bj" selected>北京</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>
            <option value="sz">深圳</option>

        </select>
    </form>
</body>
</html>

小结：

下拉列表标签：select,单独存在没有意义，需要借助子标签option
子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么

       提交后台的就是文本值

子标签option的selected属性表示被选中
select标签的属性：

   1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值**

2)size="2" 每次select标签中显示2个子标签option 了解

    3）multiple 表示可以显示多个option 了解

文本域标签：<textarea>

1.由行rows和列cols组成

<!--
        文本域标签：<textarea>
 -->
    个人简介：
    <br>
    <textarea rows="10" cols="10"></textarea>

按钮标签

button,表示按钮标签，<button type="button|reset|submit"> 按钮标签一般很少使用，提供“普通|重置|提交”功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--
    3.文本域标签：<textarea>:可以书写多个字符
    由行rows和列cols组成
    4.按钮标签： <button type="submit"></button>
    type属性，常见三个属性值：
    1）submit ：提交表单
    2）reset ：重置表单
    3）button ：按钮
    注意：需要指定文本值来显示按钮标签在页面上显示内容
    -->
    <form action="#" method="post">
      个人描述： <br/>
      <textarea rows="10" cols="30"></textarea> <br>
      <button type="submit">登录</button>
      <button type="reset">重写</button>
      <button type="button">注册</button>
    </form>

  </body>
</html>

label标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        5.label标签：可以实现通过文本选中某个指定的标签。
        说明：
            需要在label标签中书写一个for属性，属性值是要定位的标签的id属性值
        6.补充：在input标签中具有一个属性：placeholder="请输入用户名" 表示输入框的提示信息，在输入框输入内容后
        提示信息就消失了
    -->
    <form action="#" method="post">
        <input type="radio" name="sex" id="male"> <label for="male">男</label>
        <input type="radio" name="sex" id="female"><label for="female">女</label><br>
        <label for="username"> 用户名:</label>
       <input type="text" id="username" placeholder="请输入用户名">
    </form>

</body>
</html>

小结：

1.文本域标签：textarea,由rows行和cols列组成

2.button按钮标签：在type属性值中具有三个内容：reset submit button

3.label标签:可以实现通过文本定位某个标签

  <label for="某个标签的id属性值">用户名</label><br>
    <input type="text" name="username" id="username">

4.在input标签中具有一个属性：placeholder="请输入用户名" 表示输入框的提示信息，在输入框输入内容后提示信息就消失了