在HTML中使用Input和Button
是用来创建交互式表单的基本元素。
Input元素是用于接收用户输入的控件，可以用于输入文本、密码、日期、时间、数字等各种类型的数据。Input元素有多个类型，包括text、password、date、time、number等，每种类型有不同的特点和适用场景。
举例来说，text类型的Input元素可以用于输入普通文本，password类型的Input元素可以用于输入密码，date类型的Input元素可以用于选择日期，time类型的Input元素可以用于选择时间，number类型的Input元素可以用于输入数字等。
Button元素是用于触发操作的按钮，常用于提交表单、执行某个函数等。Button元素有两种主要类型，分别是submit和button。submit类型的Button元素通常用于提交表单数据，而button类型的Button元素则可以绑定自定义的函数或事件。
使用Input和Button元素可以创建各种不同的交互式表单，方便用户输入数据并进行相关操作。例如，可以使用Input元素收集用户的用户名和密码，然后使用Button元素提交表单数据进行登录。
腾讯云相关产品中与HTML中使用Input和Button相关的是腾讯云的Web应用防火墙（WAF）产品。腾讯云的WAF产品可以保护Web应用程序免受各种常见攻击，包括SQL注入、跨站脚本等。通过配置WAF规则，可以对Input和Button元素的使用进行保护，防止恶意用户利用输入表单进行攻击。详情请参考腾讯云官网的WAF产品介绍：https://cloud.tencent.com/product/waf
相关·内容
1回答
我试图弄清楚如何将值从一个角分量传递到另一个my-input.component和my-button.component
我正在尝试从my-input.component.ts接收@Input('name')，并在my-button.component.ts中用按钮(click)="displayReceivedValue()"显示my-button.component.html
import { Component, Input, OnInit } from '@angular/core';
import { MyInput } from &#
浏览 3提问于2021-04-05得票数 0
回答已采纳
我对php和html都是新手，因此需要了解php和html的基础知识。
我正在做一个迷你计算器，到目前为止，我只做了布局。我需要帮助了解如何从php代码部分(在同一页上)按下一个按钮(从HTML表单)获得值，然后在php中处理它，然后返回它以显示在HTML表单的文本框中。
<?php
/**
**need help here
*/
?>
<html lang="en">
<head>
<title>Title</title>
&l
浏览 2提问于2017-04-11得票数 0
回答已采纳
2回答
我有一个html页面，里面有一个指令(子html)，如下所示。我想为parent html中的按钮在指令( child html)中对input1和input2进行输入验证，但我不知道如何才能访问子指令中的input1和input2。我想知道访问input1和input2的正确方式是什么？提前感谢！！
父html：
<div>
<child></child>
<button name="myButton" ng-disabled="????.myForm.input1.$invalid"><button&g
浏览 0提问于2017-06-20得票数 1
4回答
我的html文档有多个行，每个行都浮动在左边。但我的第二行并没有正确地与左对齐--很难解释，最好只查看代码和jsfiddle：
<html>
<head>
<style>
label, input[type=text], button {
float: left;
}
</style>
</head>
<body>
<label for="input1">LABEL 1</label>
浏览 0提问于2019-08-31得票数 1
回答已采纳
试图打开网站的html文件。下面的onclick在Internet中不起作用，但是它可以在google和firefox中工作。有什么建议吗？
<tr id=tr1>
<td><input id=But1 style="background:url('butc.jpg')" value="Home" onclick="window.location.href='main.html'" type="button"></td>
<td>&
浏览 5提问于2011-10-08得票数 1
我在一个文件上做一个简单的替换语句，输入来自2个文本框和2个下拉列表。
平台是MVC 3，在Razor页面上。
问题是，错误只在IE上抛出，并且只有在服务器上发布时才会抛出。在IE上从本地主机运行站点不会引发任何错误。
对于，我真的很好奇，为什么这只是一个IE问题，(在Chrome和Firefox中工作得很好)
以下是页面中的代码：
<div class="form">
@using (Html.BeginForm("AddZipCode", "DatabaseHelper"))
{
浏览 7提问于2011-10-14得票数 1
回答已采纳
login.component.html代码
<div>
<input type="text" [ngmodel]="username">
<input type="text" [ngmodel]="password">
<button type="submit" (click)="logincheck()">
</div>
当我保存这个HTML页面时，ngmodel和click事件会从页面中消失，页面会自动转换为普通的HTML页面，如下所
浏览 0提问于2018-05-09得票数 2
我想知道Html控件和
和asp.net web控件。为什么我们需要这两种类型的控件？
我已经在我的网页上放置了一个html输入文本，html按钮，asp.net文本框和ASP.NET按钮。
<input id="Text1" type="text" />
<input id="Button2" type="button" value="button" />
<asp:TextBox ID="TextBox1" runat=
浏览 3提问于2010-02-24得票数 6
我正在使用WSGI、python3和apache2在核心python中实现web应用程序。现在，我需要根据python WSGI文件中某个按钮的值或id来检测哪个按钮被按下了。请建议我可以放在WSGI文件中的代码。
Python代码：
def application(environ, start_response):
if environ['REQUEST_METHOD'] == 'POST':
post_env = environ.copy()
post_env['QUERY_STRING'] = ''
浏览 0提问于2019-10-29得票数 0
1回答
我想做一个网络视图计算器。让我有一个HTML基计算器UI。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css&
浏览 2提问于2016-11-15得票数 1
我希望找到包含目标文本本身或它们的任何子元素的元素。
样本数据：
library(magrittr)
library(xml2)
library(rvest)
html <- "<button><span><span>as</span></span></button><button><p>ds</p></button><input><span><span>as</span></span><
浏览 1提问于2021-03-04得票数 2
2回答
据我所知，类的样式应该优先于元素样式。我尝试过设置button、input[type=button]和input[type=submit]的样式，并注意到对于input (button和submit)，元素中的border样式将优先于类的border样式。然而，我没有注意到button元素上的这种行为。
下面是演示这种情况的：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
input[type=button],
浏览 0提问于2012-01-25得票数 1
回答已采纳
我有一个动态创建的HTML页面，它添加了输入。
我希望能够使用html()函数捕获页面(和所有表单输入值)。
不过，这似乎不起作用。以下面的页面为例：
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#_create" ).click(function() {
浏览 0提问于2013-10-13得票数 0
回答已采纳
根据超文本标记语言规范()，窗口对象应该动态地包含页面中“命名”的元素。在我的例子中，一个带有id属性的input元素应该存在于Window对象上。
然而，根据下面的超文本标记语言(通过HTML5验证)，如果输入元素位于表单元素之下，IE不能通过它在窗口对象上的id识别输入元素。
下面的超文本标记语言将在IE8和IE10中显示一个"object“警报，然后显示一个"undefined”警报。为什么？在FireFox和Google Chrome中，它显示"object“的两个警报。我是不是漏掉了什么？
<!doctype html>
<html>
浏览 1提问于2013-04-03得票数 0
1回答
我有这个HTML结构(简化)。我想使它的标志，input和button是：
1)在标头中垂直对齐
2)标志和按钮的大小是固定的。我希望这两项中的input成为它们之间的剩余width。
(标志在左边，button在右边。Input，然后是中间位的宽度)
然后，当窗口被调整大小时，input文本自动调整大小。
<div class="header">
<div id="logo">Logo here</div>
<input type="text"/>
<div clas
浏览 3提问于2017-10-20得票数 0
回答已采纳
查询前的html复选框，我选择了选项1和选项4。
应将值存储在其中的数据，但应将其存储在选项1和选项2列中，而应将其同时存储在'opt1‘和'opt4’中
PHP
if( isset( $_POST['picked'] ) )
{
$keepdata = array();
$keepdata = $_POST['pick'];
$sqlinsert = "INSERT INTO traincheckbox VALUES ( nu
浏览 0提问于2018-02-01得票数 0
回答已采纳
我无法得到所选Id的值。
这是html和javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="input">
<button id="button" type="button" name="button">Searc
浏览 13提问于2017-12-02得票数 0
回答已采纳
4回答
我正在尝试实现一个编辑功能，它允许我在文本元素和表单元素之间来回切换。附加代码的当前功能是正确的，除了编辑按钮在单击“取消”后重新出现时变得不起作用。我使用事件委托来让创建的"cancel“按钮起作用，但现在我需要以某种方式将它圈回到顶部。
$(document).ready(function() {
$("#edit").click(function() {
var fruit = $("p").html();
var editbutton = $("#button").html();
$("#b
浏览 8提问于2015-08-11得票数 2
我已经在我的项目中创建了两个名为" input.html“和" output.html”的页面，其中单击input.html中的submit按钮，输出将以output.html格式打印 但是，我不知道如何从一个页面调用另一个页面 code.gs function doGet() {
return HtmlService.createTemplateFromFile('Input')
.evaluate().setTitle("GL StyleGuide").setFaviconUrl("https://fonts.ab2
浏览 44提问于2021-02-12得票数 0
我的js和html代码如下：
<script>
function addComment(){
var a=document.getElementById("a");
var input=document.getElementById("myinput");
a.innerHTML="<p \u0025></p>";
}
</script>
</head>
<body>
<input id="myinput" type="text"/
浏览 0提问于2014-03-08得票数 0
是否可以在HTML表中创建动态TR和TD元素？类似但比这更好的东西：
jQuery(document).ready(function() {
$('button[name="new-title"]').on('click', function(){
var table = $('table[name="errortitle"]');
var tr = $('<tr />');
var td = $('<td />');
va
浏览 3提问于2014-01-08得票数 2
回答已采纳
我创建了简单的html页面"output.html“，它由表格和一个输入按钮”添加“组成。
<html>
<head>
<style>
table {
font-family: Arial, sans-serif;
border-collapse: collapse;
width:70%;
}
td,th{
border:1px solid #dddddd;
text-align:left;
padding: 8px;
}
<
浏览 3提问于2018-10-30得票数 0
$scope.data="<h2>here we have text boxes and button</h2><button type='button' class='btn btn-primary'>inside Basic</button>"+"<button type='button' class='btn btn-primary'>inside Primary</button>"+" Name inside&
浏览 2提问于2015-08-13得票数 1
我正在使用onsen UI在monaca尝试一个应用程序。我有多个页面，并使用Onsen Navigator在我的页面中导航。
第一页有登录按钮和注册按钮，这将打开(按下)注册页面与用户and和电子邮件信息。
我正在尝试使用ons.ready( jQuery ())中的函数来感知按钮的点击。当我点击第一页(登录)上的登录按钮时，jQuery会触发所需的函数，但当我尝试单击注册按钮(在注册页面中)时，它不会触发该函数。
<script>
ons.bootstrap();
ons.ready(function() {
// Add another
浏览 0提问于2016-01-16得票数 3
在javascript中，我需要检查whiwh值用户输入的html输入如下：
<input type="text" id="volume" class="form-control" name="voilume"></input>
<div id"button"></div>
Ineed可以知道输入是否介于0、5和8之间(因此我有int和float，如您所能理解的那样)。
所以这个值必须是>= 0,5和<= 8。
如果值输入在0,5和8之间，我必须显示一个
浏览 9提问于2016-01-29得票数 2
回答已采纳
4回答
我试图实现一个文件上传，但使用 ，按钮，标签等。
这完全是关于在呈现中使用元素。
使用常规html、<label>和<input>元素，此过程将按预期工作。
<Form.Field>
<label>File input & upload for dataschemas & datasources</label>
<input type="file" onChange={this.fileChange} />
<Button type="submit&
浏览 0提问于2019-04-01得票数 16
回答已采纳
使用和，我尝试用来样式按钮，就像看到的一样。
下面是我在我的render方法中尝试过的：
;; This works but misses the icon
[:input {:type "submit"
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
:value "ok"}]
;; The following work, but I would like to av
浏览 6提问于2016-01-31得票数 1
回答已采纳
我正在尝试使用GitHub的和。在使用npm安装了这两个类之后，我开始使用由GitHub定义的css类，方法是在我的html文档中包含build.css文件。我如何将项目指向octicons提供给我的所有svg图标？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Primer</title>
<l
浏览 0提问于2016-07-11得票数 17
回答已采纳
在JavaScript中，如下所示： <!DOCTYPE html>
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input field</button>
<input type="text" id
浏览 30提问于2020-06-20得票数 0
回答已采纳
1回答
我有两个文件: test.html和forms.html test.html有一个通过AJAX请求forms.html的按钮。 forms.html是一组表单。我在我的环境中动态生成这些表单，但仅出于演示目的，在本例中我将其设为静态表单。 我将forms.html中的表单放到test.html中的div占位符中。 问题是表单不起作用。提交按钮不起作用。重置按钮不起作用。 但是，当我单独打开forms.html时，表单似乎工作得很好。提交按钮起作用。重置按钮工作正常。 如何让表单在test.html中工作？ 下面是test.html： <html>
<head>
浏览 14提问于2021-10-12得票数 0
我有两个文件index.html和index.js。当我填写表单中的文本字段并单击按钮时，它应该重定向到index.js。我怎样才能做到这一点？
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<titl
浏览 9提问于2020-10-30得票数 0
回答已采纳
我的身体有问题。在我的表单中，用户可以添加多个折扣代码。我需要验证的是两个文本框，它们是‘日期开始’和‘日期过期’，我需要找出这些文本框是否为空。在允许用户再次添加另一行之前。
这是我的密码：
function addProductDiscountCode() {
var html = '<tr id="row-count-' + iterator + '">';
html += ' <td>';
html += ' <input t
浏览 2提问于2015-04-21得票数 0
回答已采纳
2回答
我正在尝试开发一个小的短代码Wordpress插件。因此，我创建了一个主php，并在子文件夹中创建了HTML。子文件夹(类)与php-File位于同一级别。在HTML中，我打开一个模式来输入数据。通过按下保存按钮，将调用php-File中的一个方法，该方法应该将日期写入Wordpress-Database中。
php-File (短代码-conts.php)
类-文件夹
HTML (mainLook.html)
代码片段显示了我如何尝试通过JavaScript和document.getElementById()从HTML中获取值，而HTML无法工作，因为它正在返回
浏览 0提问于2018-12-27得票数 0
回答已采纳
我有div和按钮。.buttons大小未更改。
(script.js与HTML索引文件在同一目录中。)
$(document).ready(function(){
$('#next').click(function(){
$('.button').css('height','1200');
});
});
<html>
<head>
<link href="style.css" rel="stylesheet" type="t
浏览 0提问于2012-02-01得票数 0
回答已采纳
以下是HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<form action="/check" id="demo" method="post" name="demo">
<input type="text" name="
浏览 3提问于2016-08-25得票数 0
回答已采纳
我想知道如何创建自定义规则，在其中我可以用jsx语法定义fobidden html元素。 例如，我希望确保只使用我的ui库中的<Button />和<Input />组件。如果<input>或<button> html元素在jsx中使用，eslint应该会抛出一个错误。
浏览 35提问于2021-09-29得票数 0
回答已采纳
我想将我的json数据对象保存到我的Postgresql中，在单击Submit按钮后使用jQuery(ajax on post请求)和Java，请帮助我这样做？提前谢谢。
html：
(function() {
var testValue;
testValue = {};
$('input[id=buttonId]').click(function() {
var name;
name = $(this).attr('name');
testValue[name] = $(this).val();
});
$('
浏览 0提问于2016-01-18得票数 0
2回答
我正在尝试学习HTML和Javascript，在这里，我正在构建一个简单的计算器设备，其中所有的数字和操作符都是被点击的按钮，结果显示在一个输入框中。但是，当单击按钮时，我遇到了问题，即让事件触发器在框中显示选定的数字值。
下面是我的HTML和JS：
var numString = "";
$('.number').click(function() {
numString += $(this).val().toString;
$('input[name=display]').val(numString);
});
<scr
浏览 5提问于2017-09-10得票数 0
回答已采纳
我正在尝试在Angular 5中创建一个组件，它将包含一个按钮的可重用模板。在我的应用程序的不同部分，按钮将调用不同的函数，所以我希望能够告诉按钮的给定实例调用哪个函数。我知道我可以在任何需要的地方为按钮创建一个HTML标签，但我希望我可以创建一个可重用的组件，这样我就可以确保整个应用程序的格式是一致的。
错误
Got interpolation ({{}}) where expression was expected at column 0 in
[{{functioncall}}]
组件
<div id = "button">
<b
浏览 0提问于2018-04-14得票数 14
回答已采纳
我有Python2.7.3和bs.版本是4.4.1
出于某种原因，这段代码
from bs4 import BeautifulSoup # parsing
html = """
<html>
<head id="Head1"><title>Title</title></head>
<body>
<form id="form" action="login.php" method="post">
<
浏览 0提问于2017-04-07得票数 1
回答已采纳
2回答
我知道，如果我们有一个<form>和一个有或没有submit按钮的<input>，按下Enter键就会提交该表格。但是，IE是提交的(特别是，点击它遇到的第一个按钮)，即使在没有<form>标记的情况下。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onclick="alert('button 1 clicked')">bu
浏览 6提问于2013-09-28得票数 0
回答已采纳
2回答
我有一个简单的HTML无序列表和一个JavaScript函数，它在位置上添加项，而另一个函数也删除项，但是我可以在删除函数中添加什么(即使它更长，也请严格地添加基本JavaScript )，这样它就可以删除最后一个添加的项？预先谢谢：
HTML:
<html>
<body>
<h1> Shopping List </h1>
<button onclick="adding()"> Add </button>
<input type=
浏览 3提问于2016-09-07得票数 0
回答已采纳
我有两个输入类型为text的html元素和一个输入类型为button的html元素，并且我使用data- input -group属性将它们组合在一个组中。现在，我想使用data- input -group属性而不是button来选择所有输入类型为text的元素。
请看一下不适合我的代码，
<input type="text" data-input-group="reg-from">
<br>
<input type="text" data-input-group="reg-from">
<
浏览 0提问于2013-06-30得票数 1
假设我有一个简单的HTML页面，如下所示：
<html>
<head>...</head>
<body>
<input type="text" id="mytextarea" />
<input type="button" id="button1" onClick="..." />
<input type="button" id="button2" onClick="
浏览 0提问于2012-10-26得票数 0
回答已采纳
3回答
我正在尝试构建一个简单的html应用程序，获取一些基本的客户信息，并将这些信息存储在数据库中。在获取信息之后，当客户登录他的个人资料时，他可以看到3个按钮。
button 1= print
button 2= delete
button 3= edit
特殊要求：
除非单击按钮1，
然后，第一次用户登录时应该禁用按钮2和3。
用于下一个后续登录。
所有按钮都应启用。
到目前为止，我所做的事情如下：
<html>
<head>
<script>
function enableButton() {
浏览 4提问于2016-04-22得票数 0
1回答
为什么不调用这个函数？
、、、、
我试图将我的脚本和样式从标记中分离出来，但我似乎无法摆脱onclick属性。从我在Google和StackOverflow上所做的所有搜索来看，这个脚本应该能工作。如何使onclick事件与标记完全分离？
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('guest_button').onclick = function () {
document.write('You\'re a guest!');
}
</scr
浏览 1提问于2014-12-11得票数 0
回答已采纳
1回答
我使用javascript、html、nodejs、express和mysql从数据库中检索值并将其传回给html。
在这里，用户在“btnSearch”文本框中输入一个域，然后按Load按钮。javascriot在/getallusers中调用app.js代码。此函数应访问数据库并返回结果。
我面临的问题是:我无法将'btnSearch‘中的值传递给app.js。如果我在html中包含了标记，那么请求就不会转到/getallusers .instead --它会转到/hi.html?input=Music。所以我没有用这个标签。
html页面如下所示:
var
浏览 0提问于2013-11-22得票数 2
回答已采纳
1回答
数字增量按钮
、、、、
我有一个现有的html表单，它使用数组存储多个行值。因此，对于不同的行，我没有相同字段的特定名称。在PHP页面中，我根据索引匹配行。在下面的表单中，如何使按钮+和-来增加和减少特定行的数量的值？
第1行
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text"
浏览 0提问于2015-06-28得票数 1
回答已采纳
1回答
我有这样的插件结构：
(function($){
var defaults = {
param1:null,
param2:null
};
var methods = {
init:function(params) {
var options = $.extend({}, defaults, params);
$(this).append('<button
浏览 2提问于2017-05-13得票数 0
回答已采纳
我在一个应用程序上工作，我想把前端(JavaScript)和后端(Java)连接起来。我有一个HTML格式的输入。当用户通过单击按钮输入某些内容时，我希望在Java中获得该值，这样我就可以对其执行一些操作。我该怎么做呢？谢谢! <input type="text" id="input" placeholder="Input...">
<button type="button" id="button" onclick="loadResults()">Search</bu
浏览 14提问于2020-12-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
