首页 > 其他分享 >HTML标签_表单标签_表单项input1和HTML标签_表单标签_表单项input2

HTML标签_表单标签_表单项input1和HTML标签_表单标签_表单项input2

时间:2022-10-27 15:56:54浏览次数:80  
标签:单项 标签 表单 输入框 HTML 属性

HTML标签_表单标签_表单项input1:

表单项标签:

input:可以通过type属性值,改变元素展示的样式

type属性:

text:文本输入框,默认值

placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息

password:密码输入框

radio:单选框

注意:

1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。

2,一般会给每一个单选框提供value属性,指定其被选中后提交的值

3. checked属性,可以指定默认值

checkbox:复选框

注意∶

1.一般会给每一个单选框提供value属性,指定其被选中后提交的值

2. checked属性,可以指定默认值

label:指定输入项的文字描述信息

注意∶

label的for属性一般会和 input的id属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点。

代码实现:

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>表单</title>
</head>
<body>
        <!--表单form 获取请求方式get-->
        <form action = "#" method = "get">
            <!--账号输入框input placeholder输入账号信息-->
            <label for = "username">账号</label>:<input name = "username" type = "text" placeholder = "请输入账号" id = "username"><br>
            <!--密码输入框input 输入密码提示框placeholder-->
            密码:<input name = "password" type = "password" placeholder = "请输入密码"><br>
            <!--单元框radio 默认选择checked-->
            位置:<input type = "radio" name = "gender" value = "male" checked> 射手
            <!--单元框radio-->
            <input type = "radio" name = "gender" value = "female"> 打野
            <!--换行-->
            <br>
            <!--复选框checkbox 默认选择checked-->
            射手:<input type = "checkbox" name = "sheshou" value = "shooter" checked> 金克丝
            <!--复选框checkbox 默认选择checked-->
            <input type = "checkbox" name = "sheshou" value = "shooters" checked> 小炮
            <!--复选框checkbox-->
            <input type = "checkbox" name = "sheshou" value = "shooterse"> 卡莎
            <br>
       <!--登录提交框input  submit是提交的意思-->
            <input type = "submit" value = "登录">

 

 

 

 

HTML标签_表单标签_表单项input2:

file:文件选择框

hidden:隐藏域,用于提交一些信息。

按钮︰

submit:提交按钮。可以提交表单

button:普通按钮

image :图片提交按钮

src属性指定图片的路径

在html里的type属性有多个

我们就不一一演示了:

代码实现:

<!--选择文件input框file-->
            图片:<input type = "file" name = "file"><br>
            <!--隐藏域input框hidden-->
            隐藏域:<input type = "hidden" name = "id" value = "aaa"><br>

            <!--取色器input框color-->
            取色器:<input type = "color" name = "color"><br>
            <!--生日input框date-->
            生日:<input type = "date" name = "birthday"><br>
            <!--生日input框date-local-->
            生日:<input type = "datetime-local" name = "birthday"><br>
            <!--邮箱input框email-->
            邮箱:<input type = "email" name = "email"><br>
            <!--年龄input框number-->
            年龄:<input type = "number" name = "age"><br>
            <!--登录提交框input  submit是提交的意思-->
            <input type = "submit" value = "登录">
            <!--上传图片input框image-->
            <input type = "button" value = "一个按钮"><br>

 

标签:单项,标签,表单,输入框,HTML,属性
From: https://www.cnblogs.com/hungui/p/16832535.html

相关文章

  • HTMLDOM_innerHEML、样式控制
    HTMLDOM_innerHEMLHTMLDOM1.标签体的设置和获取:innerHTML2.使用html元素对象的属性3.控制元素样式使用元素的style属性来设置如://修改样式......
  • element-ui表单自定义校验
    1.问题描述项目开发过程中,遇到表单校验,这次的校验规则比较严,element-ui表单自带的校验完全解决不了问题。2.解决方法使用element-ui 表单校验中的......
  • HTML标签_综合案例_分析和HTML标签_综合案例_实现
    HTML标签_综合案例_分析:案例:旅游网站首页1.确定使用table来完成布局2.如果某一行只有一个单元格,则使用<tr><td></td></tr>3.如果某一行有多个单元格,则使用<tr><......
  • xml获取指定标签的集合
    一、pom依赖<!--dom4j的jar包--><dependency><groupId>org.dom4j</groupId><artifactId>dom4j</artifactId>......
  • 第二十八章 使用 CSP 进行基于标签的开发 - 运行时表达式
    第二十八章使用CSP进行基于标签的开发-运行时表达式运行时表达式CSP文档可能包含在提供页面时(即在运行时)在CSP服务器上运行的表达式。此类表达式使用#(expr)#......
  • 指标-标签,维度-度量,自然键-代理键,数据集市等各名词解析
    作为一个数据人,是不是经常被各种名词围绕,是不是对其中很多概念认知模糊。有些词虽然只有一字之差,但是它们意思完全不同,今天我们就来了解下数仓建设及数据分析时常见的一些......
  • 1.1 基础标签
    1.1基础标签1.1.1注释注释<!--这里面是注释--><!--也可以分多行写注释-->分割线标签<hr/>1.1.2段落段落标签<p>这是一段文字</p>分行标签<br/>标......
  • HTML 第一部分
    HTMLHTML01:初识HTMLHTMLHyperTextMarkupLanguage(超文本语言)W3CWorldWideWebConsortium(万维网联盟)成立于1994年,Web技术领域最权威和具影响力的......
  • HTML 第一部分.
    HTMLHTML01:初识HTMLHTMLHyperTextMarkupLanguage(超文本语言)W3CWorldWideWebConsortium(万维网联盟)成立于1994年,Web技术领域最权威和具影响力的......
  • HTML学习
           ......