首页 > 其他分享 >html之input标签

html之input标签

时间:2024-08-23 11:19:31浏览次数:6  
标签:控件 标签 表单 html input 属性

input标签在html中是非常重要的一种标签

主要应用场景:
‌1.登录表单‌:使用文本框和密码框收集用户名和密码。
2‌.注册表单‌:收集用户的个人信息,如姓名、邮箱、地址等。
3‌.调查问卷‌:使用单选框和复选框收集用户的选项。
‌4.文件上传‌:使用文件上传控件允许用户上传文件。‌

学习html最好的方法就是边学边练习,废话不多说,上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="www.baidu.com" method="post">
    <h1>注册界面</h1>
    用户:<input type="text" name="username" placeholder="请输入用户名" required="required"></br>
    密码:<input type="password" name="pwd" placeholder="请输入密码" required="required"></br>
    爱好:<input type="checkbox" name="hobby" value="look">  读书  <input type="checkbox" name="hobby" value="movie">  看电影  <input type="checkbox" name="hobby" value="paly">  打篮球</br >
    性别:<input type="radio" name="gender" value="men">  男  <input type="radio" name="gender" value="women">  女</br>
    <p><input type="file"></p>
    <p><input type="reset" value="重置"></p>
    <input type="submit" value="提交注册">

</form>

</body>
</html>

页面结果如下:

解释说明:
‌type属性‌:定义表单控件的类型,如文本框(text)、密码框(password)、单选框(radio)、复选框(checkbox)、文件上传(file)、重置(reset)、提交(submin)等
placeholder属性:提供占位符文本,帮助用户理解输入字段的预期内容
‌name属性‌:用于标识表单控件的名称,以便在表单提交时识别和处理。--就是发送到后台进行逻辑处理的时候,后台拿到的是个键值对,如:{username:'jack'}
‌value属性‌:设置或获取表单控件的当前值
required属性‌:指定输入字段是否必须填写
‌readonly属性‌:允许输入字段只读,但可以显示给用户查看

注意:想要发送到后台去处理,必须把内容框在form表单中。<form action="127.0.0.1:8080" method="post">中,action="服务端地址"   
method有两种:get和post
1.get方法在点了提交后会把你输入的内容以键值对的形式放到浏览器地址栏的url中,不安全。
2.post方法在点了提交后会直接把数据传送到后台,url中不会显示出来,我们日常访问网站看到的都属于这种方式,较安全,推荐使用。

**特别说明**:标签分为块级标签(独占一行)和内联标签(依次往后排列),比如P标签就属于块级标签,而input标签属于内联标签,</br>代表换行。

input标签中其实还有许多别的属性,但是常用的基本就是这么多,记住这些就够用了,至于其他小众的内容等用到了再去百度就行了。

标签:控件,标签,表单,html,input,属性
From: https://www.cnblogs.com/kkbest/p/18375544

相关文章

  • input 加减
       <a-inputclass="input-center-met"v-model:value="form.name1"><template#prefix><divclass="flexitems-center"><divclass="number-btnauto"......
  • STHTMLTestRunner
    #-*-coding:utf-8-*-"""ATestRunnerforusewiththePythonunittestingframework.ItgeneratesaHTMLreporttoshowtheresultataglance.Thesimplestwaytousethisistoinvokeitsmainmethod.E.g.importunittestimportHTML......
  • HtmlUnit:自动化操作web页面的java工具
    java有httpclient等工具,可以模拟进行一些web操作,但一些逻辑是在前端js中执行的,此时httpclient就比较困难了。此时可以考虑使用HtmlUnit,模拟出一个浏览器,全程在浏览器中操作。 本文以在百度中输入搜索关键字->点击“百度一下”按钮->打印搜索结果这一过程为例,演示HtmlUnit的......
  • JavaScript 的 标签
    标签标签在JavaScript中不是一个常见的特性,但在某些情况下,它们可以用于改善循环的可读性或退出嵌套循环。//使用标签来标识循环loop1:for(leti=0;i<10;i++){//循环1loop2:for(letj=0;j<10;j++){//循环2if(i===2&&j===2){......
  • 织梦dedecms二级菜单中判断子菜单标签怎么用
    在织梦DeDeCMS中,实现二级菜单通常涉及到使用织梦特有的标签来动态生成菜单结构。下面是如何在二级菜单中使用织梦标签来判断子菜单的存在,并据此显示或隐藏子菜单的方法。1.准备工作确定主菜单:首先确定您想要作为主菜单的栏目ID。创建子菜单:在后台为相应的主菜单创建子栏目。......
  • diff.js+diff2html-ui.js 使用实例
    <!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文件差异对比</title>&......
  • 【HTML】使用Javascript制作网页
    1、Javascript的语法规则JavaScript程序按照在HTML文件中出现的顺序逐行执行。JavaScript严格区分字母大小写。在JavaScript中,每行结尾的分号可有可无。JavaScript中主要包括两种注释:单行注释和多行注释。单行注释使用双斜线“//”作为注释标签,多行注释是以“/”标签开始,以......
  • 02-HTML&JS相关练习
    1、使用html写一个网页,要求满足以下条件:(1)网页中含有任意一张图片,图片路径使用绝对路径(这里绝对路径无法识别故使用相对路径),鼠标悬停在图片时出现“马哥教育”文本,且点击图片可跳转至马哥教育官方页面(2)网页中包含账号、密码登录,且账号提前定义好是admin且不可更改,输入密码时......
  • 【html+css 绚丽Loading】 - 000009 五行逆流珠
    前言:哈喽,大家好,今天给大家分享html+css绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • 织梦dedecms标签怎么用
    了解一下织梦模板引擎的知识是非常有意义的。模板引擎是一种使用XML名字空间形式的模板解析器,使用织梦解析器解析模板的最大好处是可以轻松的制定标记的属性,感觉上就像在用HTML一样,使模板代码十分直观灵活,新版的织梦模板引擎不单能实现模板的解析还能分析模板里错误的标记。1、织......