HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLのinput要素width属性の使い方とサンプルコード

<input> 要素の width 属性は、type="image" でのみ使用できる属性です。フォームの送信ボタンとして画像を使用する際に、その画像の幅を指定することができます。

width属性の基本情報

width 属性は HTML5 で新たに導入された属性です。<input type="image"> は、クリックするとフォームを送信する役割を持つ画像ボタンを作成するための入力タイプであり、この画像ボタンの幅を width 属性で制御します。

基本の構文は以下のとおりです。

<input width="pixels">

上記の pixels の部分には、幅をピクセル単位で指定します。

実装例：ユーザー登録フォーム

それでは、実際に width 属性を実装した例を見ていきましょう。以下は、type="image" で作成した送信ボタンの幅を指定したユーザー登録フォームのサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB − <input type="date" name="dob"><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <input type="image" src="go.jpg" alt="Submit" width="120" height="60">
</form>
</body>
</html>

出力結果

【初心者向け】HTMLのinput要素width属性の使い方とサンプルコード

コードの解説

上記の例では、ユーザーIDやパスワードなどの入力フィールドを持つフォームの中に、画像を使用した送信ボタンを配置しています。

<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB − <input type="date" name="dob"><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <input type="image" src="go.jpg" alt="Submit" width="120" height="60">
</form>

ボタンの画像は、フォームコントロールである input type="image" を使って追加されています。

<input type="image" src="go.jpg" alt="Submit" width="120" height="60">

このように、<input> の width 属性を指定することで、送信ボタンとして表示される画像の幅を自由に設定できます。なお、高さを指定する場合は同様に height 属性を使用します。

  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

  2. HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

    maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属