首页 > 其他分享 >HTML_5_表单

HTML_5_表单

时间:2023-01-09 22:56:28浏览次数:43  
标签:标签 表单 HTML 键值 提交 按钮 属性

表单是指发送给服务器的数据。

 


 

步骤:

1、使用form标签声明一个表单域。

  属性:action,目的地的url。

     method,提交方式:get,适合小量数据,显式提交,不安全。post,适合大量数据,隐式提交,安全。

2、在表单域内获取用户输入值。

  • 使用输入标签input

  属性:name,键值对的键,必须有此属性,否则不提交。

     value,键值对的值。

     type:text小文本,password密码,radio单选框,checkbox多选框、submit提交按钮、button普通按钮、hidden隐藏标签

  • 使用下拉框标签select

      子标签:option,为一个选项。

  • 使用文本域textarea

      属性:rows,文字行数。cols,文字列数。

3、使用submit按钮提交表单数据。

例子:

<html>
    <head>
        <title>表单学习</title>
        <meta charset="UTF-8">
    </head>
    <body>
       <form action="#" method="get">
          <table border="0" cellpadding="5px" cellspacing="4px">
              <tr>
                  <td width="80px">用户名:</td>
                  <td width="100px">
                    <input type="text" name="uname">
                </td>
              </tr>
              <tr>
                  <td>密码:</td>
                  <td>
                    <input type="password" name="pwd">
                </td>
              </tr>
              <tr>
                  <td>邮箱:</td>
                  <td>
                    <input type="text" name="uemail">
                </td>
              </tr>
              <tr>
                  <td>手机号码:</td>
                  <td>
                    <input type="text" name="uphone">
                </td>
              </tr>
              <tr>
                  <td>性别:</td>
                  <td>
                    男<input type="radio" name="sex" value="1" checked="checked">
                    女<input type="radio" name="sex" value="0">
                </td>
              </tr>
              <tr>
                  <td>爱好:</td>
                  <td>
                    <input type="checkbox" name="fav" value="1">唱
                    <input type="checkbox" name="fav" value="2">跳
                    <input type="checkbox" name="fav" value="3">rap
                </td>
              </tr>
              <tr>
                  <td>籍贯:</td>
                  <td>
                    <select name="origin" >
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广东</option>
                        <option value="4">深圳</option>
                    </select>
                </td>
              </tr>
              <tr>
                  <td>个人介绍:</td>
                  <td>
                    <textarea name="readme"  cols="30" rows="10"></textarea>
                </td>
              </tr>
              <tr>
                  <td colspan="2" align="center">
                    <input type="checkbox">是否同意<a href="">《用户协议》</a>
                </td>
              </tr>
              <tr>
                  <td colspan="2" align="center">
                    <input type="submit" value="注册">
                </td>
              </tr>
          </table>
       </form>
    </body>
</html>

效果:

 

标签:标签,表单,HTML,键值,提交,按钮,属性
From: https://www.cnblogs.com/lurenjia-bky/p/17038761.html

相关文章

  • HTML超文本标记语言3
    三、HTML表单标签1.form标签<form>form标签name=表单名称,action=表单提交的地址,method_=表单提交方式:get/postget/post详解:1.get提交数据时:把数......
  • c# webview2获取网页HTML的绝招
    usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Linq;usingSystem.Text;usingSyste......
  • Echarts做仪表图-含HTML直接保存加个JS文件就可以用
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>echarts</title><!--引入echarts.js--><scriptsrc="echarts.js"></script></head><bodyst......
  • web表单设计器的优点体现在哪?
    在数字化管理越来越规范的当下,拥有一款优质高效的低代码开发平台,确实能给企业提质增效带来更大的帮助。很多客户朋友会问道:web表单设计器都有哪些特点?为什么能在企业的现代......
  • 用python处理html代码的转义与还原-转
    本篇博客来源:用python处理html代码的转义与还原&#x27;&amp;&lt;&gt;&quot;&#x27;等特殊字符摘要:html转义:importhtml#字符串转义str="<tag>aaa</tag>"str_out=......
  • 2023新年红包,兔年HTML红包页面代码【2023新年快乐_附源码】
    一.新年红包,兔年HTML红包页面1.1资源获取和效果预览1.源码资源获取:https://download.csdn.net/download/weixin_52908342/87373505快速通道:点击跳转下载新年红包,兔年......
  • react 表单之upload上传 校验
    import*asReactfrom'react';importstylesfrom'./VideoEdit.module.scss';import{IVideoEditProps}from'./IVideoEditProps';import{Button,Form,Inp......
  • HTML超文本标记语言2
    二、基本标签1.文件标签(结构)<html>根标签<head><title>页面标题(标签)</title></head><body>页面所有内容包括:......
  • HTML_4_内嵌标签与框架标签
    内嵌标签:iframe,在页面内选定一块区域显示指定的其它网页。例子:实现了点击超链接后在页面内的窗口,打开对应网页。<html><head><title>内嵌标签学习</......
  • html snippets
    SomeusefulUnicodeentitiesNon-BreakingSpacesnippetnbs ←snippetleft←→snippetright→↑snippetup↑↓snippetdown↓↩snippetreturn↩......