首页 > 其他分享 >5 表单标签

5 表单标签

时间:2023-08-18 10:13:01浏览次数:33  
标签:form 标签 表单 提交 按钮 数据

5 表单标签

表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后,就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分:

  • 表单标签,包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
  • 表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
  • 表单按钮,包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性:

属性 描述
action 访问服务器地址 服务器端表单处理程序的URL地址
method post、get[默认值] 表单数据的提交方法
target 参考超链接的target属性 表单数据提交时URL的打开方式
enctype application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] 表单提交数据时的编码方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<h3>注册用户</h3>
<form action="http://127.0.0.1:8888" method="post" enctype="application/x-www-form-urlencoded">
    <!--    用户名-->
    <p>
        <label for="user">姓名: </label>
        <input id="user" type="text" name="user" placeholder="用户名">
    </p>
    <!--    密码-->
    <p>密码:<input id="pwd" name="pwd" type="password"></p>
    <!--    复选框-->
    <p>爱好:
        篮球<input name="hobby" type="checkbox" value="basketball">
        足球<input name="hobby" type="checkbox" value="football">
        乒乓球<input name="hobby" type="checkbox" checked="checked" value="pingpang">
    </p>
    <!--单选框-->
    <p>性别:
        男<input name="gender" type="radio" value="man">
        女<input name="gender" type="radio" value="woman">
    </p>
    <!--    日期日历-->
    <p>生日: <input name="birthday" type="date"></p>
    <!--    下拉框-->
    <p>籍贯:
        <select name="province" multiple="multiple" size="3">
            <option value="hebei" selected="selected">河北省</option>
            <option value="shanxi">山西省</option>
            <option value="beijing">北京市</option>
            <option value="qinghai">青海省</option>
        </select>
    </p>
    <!--    提交-->
    <p>
        <input type="button" value="按钮">
        <input type="reset" value="reset">
        <input type="submit">
<!--        <button>提交数据</button>-->
    </p>
</form>
</body>
</html>
代码效果图如下:

image

标签:form,标签,表单,提交,按钮,数据
From: https://www.cnblogs.com/zczhaod/p/17638200.html

相关文章

  • 动态添加表单元素
    <html><head><title>动态添加表单元素</title></head><scriptlanguage="javascript">functionAddElement(mytype){varmytype,TemO=document.getElementById("add");varnewInput=document.createElement("......
  • 3 列表标签
    3列表标签html中的列表标签,该类标签是关于HTML文档中列表的,包含dl、dt、dd、ol、li、ul等标签。这里主要说的是ul和ol标签。(1)ol标签代表HTML的有序列表。ol成对出现,以开始,结束。列表中的每一列使用标签定义,这一点与无序列表相同。每列使用数字或字母开头。(2)ul标签代表HTML无序......
  • 2 超链接标签
    2超链接标签超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的,用户通过点击......
  • 1 基本标签
    <!DOCTYPEhtml><htmllang="en"xmlns="http://www.w3.org/1999/html"><head><metacharset="UTF-8"><title>1基本标签</title></head><body><br><!--标题标签-->&......
  • 关于部分地区EDGE浏览器首页或者“新建标签页”无法打开、一直转圈或空白页的解决方案
    假期回家期间遇到一件事情,家里使用的是ikuai软路由,接入了山东移动+山东广电双线路,最近几天EDGE浏览器启动时一直不太顺畅,具体表现为浏览器启动时一直转圈,且首页变成空白页,点击“新建标签页”也会出现此现象。此外,微软的MSN(www.msn.cn)也无法正常访问。我突然冒出一个想法,会不会是......
  • iframe标签下的通信
    通常在页面中嵌套iframe的情况下还需要进行消息传递的通信需求。一般分为两种情况:1.iframe里的链接与父页面链接是非跨域    这种情况处理比较简单,直接在父级页面下就可以写脚本控制iframe里的元素,同时对iframe里的元素进行操作,例如绑定事件,当事件触发时发送消息给父级......
  • Django博客开发教程:实现标签页面
    标签列表是的URL是:网站域名/tag/标签名,标签名是URL里的<tag>传进来的。标签页面和列表页面展现样式是一样的,前面我们也提及过,所以我们直接复制list.html页面,然后更名为tags.html。视图函数代码:blog/views.pydef tag(request, tag):    list = Article.objects.filter......
  • 智能标签系统如何助力智能推送服务
    智能推送系统介绍智能推送系统是一种利用人工智能和大数据等技术,根据用户的需求、兴趣、行为等信息,自动化地向用户推送个性化内容的系统。它可以通过用户画像、历史行为、实时数据等多种数据源的分析和挖掘,为每个用户提供具有高度相关性和个性化的推送内容。MobPush就是一款智能化......
  • EL表达式与JSTL标准标签库
     先导入2个jar包使用指令<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%> <%@pagelanguage="java"contentType="text/html;charset=UTF-8"  pageEncoding="UTF-8"%><%@tagliburi=&qu......
  • 问题--清空输入框表单
    1.问题--想要清空输入框表单//3.验证的是验证码//3.1获取验证码表单constcodeInput=document.querySelector('[name="code_login"]')//3.2使用change事件监听器,邮箱输入框值发生变化的时候,执行verify_Code函数codeInput.addEventListener('change',verify_Code)//......