How to set button size in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set button size in html

coldplay.xixi

Apr 27, 2021 pm 01:59 PM

html

htmlThe method to set the button size is to directly add width and height to the input element. The code is [

How to set button size in html

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

How to set the button size in html:

Setting the button size in html: You can directly add width and height to the input element. The specific code is as follows:

<input type="submit" value="确定" style="width:100px;height:60px">

Copy after login

The following is the comparison effect of not setting the input button size and setting the button size:

How to set button size in html

#The form input element in html is an inline block element, which can be used with Other elements on the same line can set their own width and height.

If you set the input button size (width, height) according to the above method, but still do not achieve the effect of changing the input button, you can check whether the code in the html is incorrect or conflicts with other codes.

Extended information:

The type attribute in input specifies the type of input element. The attribute value submit defines the submit button. The submit button will send the form data to server.

Defines a clickable button, but has no behavior. The button type is often used to launch JavaScript programs when the user clicks the button.

Example:

How to set button size in html

Effect

How to set button size in html

##Source code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input</title>
<style type="text/css">
body{background: #ddd;}
form{margin:0;padding:0;}
form .btn{
width:100px;
height: 40px;
}
</style>
</head>
<body>
<input type="submit" value="确定" style="width:100px;height:60px;">
<input type="submit" value="确定" style="width:100px;height:100px">
<input type="submit" value="确定" >
<form action="form_action.asp" method="get">
<p>Email: <input type="text" name="email" /></p>
<p>Pin: <input type="text" name="pin" maxlength="18" /></p>
<input type="submit" value="提交" class="btn" />
</form>
</body>
</html>

Copy after login

Related learning recommendations: html video tutorial

The above is the detailed content of How to set button size in html. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn