HTML之表单标签

最新推荐文章于 2023-08-13 17:38:03 发布
最新推荐文章于 2023-08-13 17:38:03 发布
阅读量394 收藏 4
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X18160013/article/details/121685803
版权
  1. 表单的认识 

    表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

     （1）表单标签：这里面包含了处理表单数据请求URL地址以及数据提交到服务器的方式。

     （2）表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

     （3）表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的处理程序或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

  2. Form 标签

    基本结构:

    <form></form>

    功能说明：用于声明表单区域，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器。

    基本语法：

    <form action="URL" method="get|post">...</form>

  3. 表单元素
    （1）输入框 input
     <input /> 标签用于搜集用户信息。
     input（单标签）
    type属性：
            checkbox：多选
            file：文件上传框
            hidden：隐藏域
            image：图像形式的提交按钮
            password：密码框
            radio：单选
            reset：重置按钮
            submit：提交按钮
            text：普通文本框
            button：普通按钮

    name属性：

        注：表示控件的名称，有名称的标签数据才会提交到后台

            凡是要提交到后台的控件，都要加上name

            用于单选与多选的分组，同一组的元素name需要一致

            名字的命名，可以使用：英文、数字、下划线 ，数字不能开头；建议使用输入框所表达的含义相应的英文或拼音

    value属性：

        注：有不同的类型(type)中，value的意义是不同的

            text/password 如果我们提交写上,它就是默认值(也是我们要提交的值)，提交value的值

            submit/button/reset 表示显示在按钮中的文字

            radio/checkbox 是一个元素所代表的值

    其它属性：

    placeholder：定义输入框的提示文字

            maxlength：设置文本框最多输入多少字符

            readonly：只读(不可输入)

            disabled：禁用(不可输入) -> 不会提交这个表单元素的数据

            checked：仅用于 radio/checkbox，作用是设置默认选中项

    （2）下拉框 select
    可创建单选或多选菜单。

    基本结构：

    <select name=””>

    <option></option>

    </select>
    option的属性：
    disabled
    selected
    value
    （3）多行文本域 textarea
    <textarea> 标签定义多行的文本输入控件。

    文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
    可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
    （4）Label标签
    为表单标签设置标注
    语法：

    <input type="radio" id="sex" ><label for="male">男</label>

  4. 运用
  5. <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>起名困难户</title>
    <style>
        body {
            background-image: url("D:/2021.11.29/images/bg.jpg");
        }
    </style>
</head>

<body>
    <table border="1" width="800" height="500" align="center" background-color="#FF6699">
        <tr>
            <td bgcolor="#F3F3FA">
                <h2 align="center"><img src="D:\2021.11.29\images\logo.png" alt="" height="40" widt="50">&nbsp;&nbsp;&nbsp;&nbsp;用户注册</h2><br>
                <form action="" align="center">
                    用户名称：<input type="text" placeholder="请输入用户名！" style="width: 400px;height: 30px;"><br><br> 登录密码：
                    <input type="password" placeholder="请输入登录密码！" style="width: 400px;height: 30px;"><br><br> 重复密码：
                    <input type="password" placeholder="请输入您的确认密码！" style="width: 400px;height: 30px;"><br><br> 电子邮箱：
                    <input type="text" placeholder="请输入您的邮箱！" style="width: 400px;height: 30px;"><br><br> 性别：
                    <input type="radio"> 男 <input type="radio">女
                    <br><br> 职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：
                    <select name="fruit" style="height: 30px;width: 400px;" align="left">
                        <option value="1">老师</option>
                        <option value="2" selected="selected">学生</option>
                        <option value="3">国家公务人员</option>
                        <option value="4">其他</option>
                    </select><br><br> 爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好： <label for="awards"></label><textarea id="awards" cols="1" rows="3" style="width: 400px;height: 100px;">书法\乐器\运动编程\</textarea><br><br>
                    <hr><br>
                    <input type="button" value="注册" / style="width: 100px;height: 25px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置" / style="width: 100px;height: 25px;">
                </form>
            </td>
        </tr>
    </table>
</body>

</html>

 

我谢谢
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
12-表单标签.html
12-19
12-表单标签.html
HTML基础——表单标签
XJAxwwan_的博客
05-06 4249
在我们上面的单选框及多选框中，要想选中，只能在小圆圈和小方框中点击，这就会造成一个问题，对于眼力不太好的人，如老年人来说，就会比较麻烦，不好点中。<form>标签是用户制作HTML表单标签的基础，它的作用是用于将其他表单标签包裹起来，以便将个标签的内容作为一个整体，可以一起提交给后台。input是一个单标签，它可以根据type属性值的不同，展示不同的效果，在网页中显示收集用户信息的表单效果。此时，它有三个type属性：submit、reset、button，作用与在input中作为属性的作用相同。
HTML表单标签
2302_76643111的博客
04-27 984
表单元素是指不同类型的input元素、文本框、密码框、下拉列表框、单选按钮、提交按钮等等，一般由ingput、textarea、select标签构成，需要放到from标签内使用。元素根据type不同的属性取值可以有不同的形态。创建一个表单，设置html名称为注册页面，传送方式为 post，当用户提交表单时，提交至 demo.html 页面进行处理。使用或时，要保证选择对象的名称相同（name）。元素有很多种形态，根据type的属性不同。
HTML 表单标签
weixin_45904557的博客
02-28 7900
一、什么是表单标签 表单是用来采集用户的输入数据，然后将数据提交给服务器 二、表单的组成 一个表单有三个基本组成部分： ①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 ②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 ③表单按钮：包括提交按钮、复位按钮和一般按钮； 三、表单标签 表单标签＜form＞＜/form＞ 功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据
HTML学习9：常用标签之表单标签
life is wonderful
10-27 4962
HTML 表单用于搜集不同类型的用户输入。        表单标签列表：        一表单标签        表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等 等）输入信息的元素。表单使用表单标签（）定义。        二表单输入标签        多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（typ
HTML系列之表单标签
StayAlive1887的博客
07-01 1114
表单用于收集用户的输入信息，如我们常看见的登录页面，需要用户输入账号和密码，这时候，我们要拿到用户输入的账号和密码，就需要使用表单标签。密码：用户名：
表单标签大全.html
03-13
涵盖了表单标签的大部分内容，主要是开发过程中最常用的
JSP实现用于自动生成表单标签html代码的自定义表单标签
01-08
本文实例讲述了JSP实现用于自动生成表单标签html代码的自定义表单标签。分享给大家供大家参考。具体如下： 这个是自己写的一个简单的JSP表单标签，用于自动生成checkbox,select,radio等标签，传入菜单集合生成html...
html表单标签
03-22
html表单一些基本的标签操作，ppt制作好的，可以看看，简单易懂
HTML 使用表单标签实现注册页面的实例代码
09-22
主要介绍了HTML 使用表单标签实现注册页面的实例代码,需要的朋友可以参考下
HTML-表单标签
m0_46688827的博客
12-14 533
HTML-表单标签
HTML表单标签大全并附有详细代码+案例
最新发布
小新的博客
08-13 4905
HTML表单标签 HTML 表单用于搜集不同类型的用户输入。 一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。 1. 表单标签 HTML 表单用于收集用户输入，表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。 注意：元素是块级元素，其前后会产生折行。
html的表单标签（form）
weixin_64311421的博客
02-12 740
表单标签的一些整理
html中的表单标签
weixin_51182359的博客
04-23 3434
html 中的表单标签介绍
HTML常用标签之表单form
weixin_45604020的博客
06-21 7600
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
html表单类的标签
weixin_43731527的博客
02-26 1217
1.input标签 (1)type:规定 input 元素的类型。type="" (2)name:规定 input 元素的名称,用于对提交到服务器后的表单数据进行标识。 用法：name="" (3)placeholder:属性提供可描述输入字段预期值的提示信息. <input type="text" name="。。。" placeholder="请输入0-9的6位数编码"/>...
HTML 表单宽度标签
05-25
HTML 表单宽度可以通过使用 `width` 属性来设置。例如： ```html ;"> <!-- 表单内容 --> ``` 在上面的示例中，我们将表单的宽度设置为 500 像素。您还可以使用百分比来设置表单的宽度，例如： ```html ;"> <!-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值