首页 > 其他分享 >HTML 常用表单元素使用以及注解

HTML 常用表单元素使用以及注解

时间:2023-12-15 11:59:42浏览次数:32  
标签:定义 文本框 表单 HTML 提交 按钮 注解 数据

一、表单的用途

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

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

表单标签:这包含了处理表单数据所用的URL以及数据提交到服务器的方式。

表单域(表单控件):包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮:包括提交按钮、复位(重置)按钮和一般按钮;用于将数据传送到服务器上或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

HTML5新标签
标签 描述
form 定义供用户输入的表单
input 定义输入域
textarea 定义文本域 (一个多行的输入控件)
label 定义了 input 元素的标签,一般为输入标题
fieldset 定义了一组相关的表单元素,并使用外框包含起来
legend 定义了 fieldset 元素的标题
select 定义了下拉选项列表
optgroup 定义选项组
option 定义下拉列表中的选项
button 定义一个点击按钮

datalist 指定一个预先定义的输入控件选项列表
keygen 定义了表单的密钥对生成器字段
output 定义一个计算结果

form标签

​ 用来定义表单,可以包含多个表单元素

​ 常用属性

​ . action 提交数据给谁处理 , 即处理数据的程序,默认为当前页面

​ . method方法 ; 提交数据的方式,取值 : get(默认),post

​ get和post的区别

​ get: 以查询字符串形式提交,数据在地址栏中能看到,长度有限制,不安全

​ post: 以表单数据组形式提交,在地址栏中式看不到数据的,长度无限制,安全

​ . enctype ; 指定提交数据的编码,取值application/x-www-form-urlencoded(默认值), multipart/form-data(文件上传时使用)

单行文本框:下·

type/"表单"常用属性:

​ . name 名称,很重要,如果没有指定name,则该表单元素的数据时无法提交的

​ . value 初始值,

​ . size 宽度

​ . maxlength 最大的字符数

​ . readonly 只读,readonly=“readonly” ; 可以简写readonly,即只写属性名,不写属性,只是变为可读,但是数据依旧可以提交

​ . disabled 禁用 ; disabled=“disabled”, 可简写即disabled 完全禁用,服务器拿不到,数据不能提交

代码演示

    <label for="text">*普通文本框: </label><input type="text" name="text" id="text"><br>
 
    <!-- type="password" 表示密码文本框,其输入的内容以密文的形式出现 -->
    *密码文本框: <input type="password" name="password"><br>
 
    <!-- type="number" 表示数字数据库,只允许用户输入数字,小数或者负数 -->
    *数字输入框: <input type="number" name="number"><br>
 
    日期输入框: <input type="date" name="date"><br>
 
    <!-- type="tel" 在移动端会调起数字键盘 -->
    <!-- maxlength="11"表示输入最大的字符数 -->
    电话号码输入框:<input type="tel" name="tel" maxlength="11"><br>
 
    <!-- type="email" 在移动端会显示@ -->
    邮箱输入框: <input type="email" name="email"><br>
 
    <!-- type="radio" 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 -->
    <!-- checked表示默认选中 -->
    *单选框:<label><input type="radio" name="sex" value="男" checked>男</label>
    <label><input type="radio" name="sex" value="女">女</label><br>
    *复选框:<input type="checkbox" name="hobby" value="足球">足球
    <input type="checkbox" name="hobby" value="排球">排球
    <input type="checkbox" name="hobby" value="乒乓球">兵乓球<br>
 
    搜索框:<input type="search" name=""><br>
 
    <!-- type="button"在value属性中可以显示按钮的内容 -->
    *普通按钮:<input type="button" value="普通按钮"><br>
 
    <!-- type="submit" 结合(form)表单域实现提交效果
	在表单中 submit 点击之后会自从触发提交行为,会向action指定的地址提交,请求方式为method指         定的方式通常表单提交为post
	-->
    *提交按钮:<input type="submit" value="提交按钮"><br>
 
     <!-- 图片会被当作一个按钮 -->
    <input type="image" src="../02Day/image/华仔.png" height="50">
 
    <!-- reset表示重置按钮,会让表单回到默认值-->
    重置按钮:<input type="reset" value="重置按钮"><br>
 
    <!-- accept属性可以过滤文件 -->
    文件上传框:<input type="file" name="file" accept="img/*"><br>
 
    <!-- 隐藏域在页面不可见,但是可以随着表单一起提交给服务端-->
    隐藏域:<input type="hidden"><br>
 
    <!-- cols相当于width rows相当于heigh -->
    <textarea name="" id="" cols="30" rows="10"></textarea><br>
 
    <!-- selected指定默认选中 -->
    <!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
    请选择课程:
    <select name="recouse">
        <optgroup label="理科"></optgroup>
        <option value="高等数学">高等数学</option>
        <option value="离散数学" selected>离散数学</option>
        <option value="线性代数">线性代数</option>
        <option value="概率论">概率论</option>
    </select>
</form>

标签:定义,文本框,表单,HTML,提交,按钮,注解,数据
From: https://www.cnblogs.com/jhdp/p/17903056.html

相关文章

  • 用html实现本地文件的上传
    实现本地文件的上传需要使用到HTML5中的FileAPI和FormData对象。以下是一个简单的实现示例:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文件上传</title></head><body><formid="upload-form"><......
  • 用什么样的开源流程表单实现办公流程化?
    近日,有不少热心网友询问道:如果要实现流程化办公,让整个办公效率火速提升上来,可以用什么样的开源流程表单工具?大伙都知道,随着低代码开发平台的盛行,办公效率也得到很大的提升,它的核心表单制作工具也因其可视化设计、灵活易操作、简便好维护等优势特点,成为很多合作伙伴青睐的优势了。......
  • HTML5 文件上传下载的实例代码
    前言HTML5中提供的文件API在前端中有着丰富的应用,上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好,包括移动端,除了IE只支持IE10以上的版本。想要更好地掌握好操作文件的功能,先要熟悉每个API。FileList对象和file对象HTML中的input[type=......
  • Chrome扩展开发实战:快速填充表单
    大家好,我是dom哥。我正在写关于Chrome扩展开发的系列文章,感兴趣的可以点个小星星。填表单是打工人经常面对的场景,作为一个前端,我经常开发一些PC端的页面,它们主要由表单和表格构成,而输入框又是表单里最常见的表单项。接下来就试着做一个简单的小扩展,用于快速给表单里的输入......
  • 如何让@Transactional注解方法被无注解的方法调用时使事务生效
    Java-如何让@Transactional注解方法被无注解的方法调用时使事务生效问题在springboot项目中,同一个类中,无@Transaction注解的方法调用另一个有@Transaction注解的方法,该如何让事务生效?‍解法importorg.springframework.beans.factory.annotation.Autowired;importorg.spr......
  • 如何让@Transactional注解方法被无注解的方法调用时使事务生效
    Java-如何让@Transactional注解方法被无注解的方法调用时使事务生效问题在springboot项目中,同一个类中,无@Transaction注解的方法调用另一个有@Transaction注解的方法,该如何让事务生效?‍解法importorg.springframework.beans.factory.annotation.Autowired;importorg.spr......
  • Spring-第四章:Spring注解配置
    四、Spring注解配置1、IoC注解1.1常用注解1.2数据装配1.3其他bean的引用1.4集合的装配1.5生命周期1.6实例化时机&scope作用域2、AOP注解......
  • html 5(三)之框架标签
    iframe嵌入嵌入广告<iframesrc="网址"height=""width=""frameborder=""></iframe>与超链接target关联<ahref="httos://www.toutiao.com"target="container">头条</a><iframename=&q......
  • html 5(二)之表单
    表单表单也就是交互区域<formaction="https://www.baidu.com/s"target="_self"method="get"><inputtype="text"name="wd"><button>搜索</button></form><form>表单标签......
  • html (六)全局属性
    全局属性:id、class、id作用:锚点、label表单控件关联注意:不用在<head>、<html>、<meta>、<script>、<style>、<title>使用该属性仅限一个html不能重复class作用:指定类名,配合CSS表示样式styleCSS设置样式dir值:ltr、rtl<dbodir="rtl">你好</dbo>title用于超......