Home >Web Front-end >HTML Tutorial >How to set the width of input in html
How to set the width of input in html
- 青灯夜游Original
- 2021-11-01 16:58:4319937browse
How to set the input width in html: 1. Set the width attribute to the input element, the syntax ""; 2. Add the width style to the input element, the syntax "input {width:width value;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Set the width of the input in html
Method 1: Use the width attribute of the input element
HTML 5 width attribute The attribute specifies the width of the element.
Note: The width attribute is only applicable to <input type="image">.
Tip: It is a good practice to specify height and width attributes for images. If these properties are set, the required space will be reserved for the image when the page loads. Without these attributes, the browser cannot understand the size of the image and cannot reserve appropriate space for it. What happens is that when the page and images load, the page layout changes.
Example:
<form action="demo-form.php"> 用户名: <input type="text" name="name"><br> 密 码: <input type="password" name="pass"><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> <input type="image" src="img_submit.gif" alt="Submit" width="100" height="100"> </form>
Rendering:
##Method 2: Using css width style
The width attribute sets the width of the element.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#pass {
width: 200px;
}
</style>
</head>
<body>
<form action="demo-form.php">
用户名: <input type="text" name="name"><br>
密 码: <input type="password" name="pass" id="pass">
</form>
</body>
</html>Rendering:
html video tutorial"
The above is the detailed content of How to set the width of input in html. For more information, please follow other related articles on the PHP Chinese website!