首页 > 其他分享 >HTML学习 之 <input>标签

HTML学习 之 <input>标签

时间:2024-03-29 20:58:05浏览次数:25  
标签:标签 HTML 用于 input type 输入 属性

目录

标签属性

type属性

text

password

number

email

checkbox

radio


<input>标签用于搜集用户信息。

在html中,<input>标签可以没有结束标签,但在xhtml中<input>必须被正确地关闭。

<input>标签属性

<input>标签属性共约有29个,比较常用的是下面这几个:

type规定input元素的类型,详见下文
name定义input元素的名称,获取值的时候要用它
value规定input元素的值

type属性

text

用于输入单行文本。

<input type="text" />

(斜杠可带可不带,后同)

password

用于输入密码,并将输入内容隐藏为星号或圆点。

<input type="password">

number

用于输入数值,可以使用min和max属性限制输入的范围。

<input type="number" max="10">
<input type="number" min="10">

email

用于输入电子邮件地址,浏览器会自动检查输入的格式是否正确。

<input type="email">

checkbox

用于选择多个选项中的一个或多个。

<input type="checkbox" name = "hobby">写代码
<input type="checkbox" name = "hobby">看博客
<input type="checkbox" name = "hobby">看电视

radio

用于选择多个选项中的一个。

<input type="radio" value = "x" checked>男
<input type="radio" value = "x">女

标签:标签,HTML,用于,input,type,输入,属性
From: https://blog.csdn.net/a_pjx_z/article/details/137153431

相关文章

  • HTML元素语义化补充之css函数(三)
    文章目录CSS中的函数css函数–varcss函数–calccss函数–blurcss函数–gradientlinear-gradient的使用CSS中的函数◼在前面我们有使用过很多个CSS函数:比如rgb/rgba/translate/rotate/scale等;CSS函数通常可以帮助我们更加灵活的来编写样式的值;◼下面有几个......
  • HTML5 和 CSS3 提高
    一、HTML5的新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。声明:1.新特性增加了很多,但是我们专注于开发......
  • 浏览器内多个标签页之间的通信方式有哪些
    浏览器内多个标签页之间的通信方式有哪些?1.localStorage(不可跨域)在Web开发中,localStorage是一个用于在浏览器中存储键值对数据的API,可以被不同标签页或窗口之间共享。借助相关的storageevent可以使用它来实现多个标签页之间的通信。2.cookie(不可跨域)Cookie......
  • 不用ul列表标签,用nav标签做出简洁导航栏
    本人想开设一个minecraft服务器,正想着为我的游戏服务器写一个网页,加上今天上完web课有所感想写了这篇博客。在大学的web教材当中,都是用ul标签来做导航来(这么说是因为我们的教材就是教我们用ul标签来做而且不怎么好看),那么今天阿征教大家如何不用列表也能做出导航栏。效果正......
  • HTML基础标签
    基础标签:加粗标签:加粗标签:      作用:为文本添加加粗效果      基本语法:        <b>文本</b>  <strong>文本</strong>      注意:双标签      书写标签时:快捷键:记住标签的单词,直接配合tab/回车键,直......
  • 【前端面试题-20】js如何对输出内容进行HTML编码
    在JavaScript中,对输出内容进行HTML编码通常是为了防止XSS攻击(跨站脚本攻击),即将特殊字符转换成HTML实体的形式,避免它们被浏览器解析为HTML或JavaScript代码。以下是一些常见的HTML编码方法:使用内建函数encodeURIComponent()和encodeURI()虽然这两个函数主要用于编码URI......
  • 做拖拽的标签遇到的问题总结
     这种表格只有2个一个左边一个右边,使用自定义表头<el-table-column><template#header><divclass="box_right_table_header_left"><span>XX名称</span></div><......
  • HTML精美登录页面,(动态渐变效果+稍微透明效果)
    最近,学校留的html作业做出来十分简陋学校作业如上图所示,今天我来教大家做一个精美的登录页面。以下是精美的登录页面。HTML精美登录页面接下来我来带大家写代码一,HTML代码<bodyclass="meau"><divclass="formBox"><formaction=""class="FORMF">......
  • vue之实现单击与双击、同一标签使用click实现单双击操作、不选最后一个子元素的选择器
    MENUhtmlJavaScriptstyle解析html<template><divclass="box"><divclass="box_content"><pclass="box_p1"@click.prevent="tabSwitch({id:'keyId'})">......
  • 初识HTML(二)
    列表作用:布局内容排列整齐的区域。列表分类:无序列表、有序列表、定义列表。无序列表作用:布局排列整齐的不需要规定顺序的区域。标签:ul嵌套li,ul是无序列表,li是列表条目。<ul><li>第一项</li><li>第二项</li><li>第三项</li></ul>效果:  注:ul标签......