html中怎麼設定input的寬度-html教學-PHP中文網

首頁

web前端

html教學

html中怎麼設定input的寬度

青灯夜游

Nov 01, 2021 pm 04:58 PM

html input 寬度

html中設定input寬度的方法：1、為input元素設定width屬性，語法「」；2、為input元素新增width樣式，語法「input {width:寬度值;}」。

html中怎麼設定input的寬度

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

html中設定input的寬度

#方法1：利用input元素的width屬性

HTML 5 width 屬性屬性規定元素的寬度。

注意：width 屬性只適用於 <input type="image">。

提示：為圖片指定 height 和 width 屬性是個好習慣。如果設定了這些屬性，當頁面載入時會為圖片預留需要的空間。而如果沒有這些屬性，瀏覽器就無法了解影像的尺寸，也就無法為其預留合適的空間。情況是當頁面和圖片載入時，頁面佈局會改變。

範例：

<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>

登入後複製

效果圖：

html中怎麼設定input的寬度

#方法2：利用css width樣式

html中怎麼設定input的寬度

############# #####width屬性設定元素的寬度。 ###

<!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>

登入後複製

###效果圖：###############推薦教學：《###html影片教學###》###

以上是html中怎麼設定input的寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn