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

HTML<入力>サイズ属性

要素のsize属性は、入力の幅を設定するために使用されます。幅が広いほど、幅の広いテキストボックスになります。次の入力タイプ（テキスト、検索、電子メール、パスワード、電話、URL）のサイズ属性を設定できます。

以下は構文です-

<input size="size_num">

上記のsize_numは、数値で設定する必要のある入力の幅です。デフォルトは20です。

要素-

のsize属性を実装する例を見てみましょう。

例

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br>
   DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

出力

HTML 入力 サイズ属性

上記の例では、ボタンが付いたフィールドがいくつかあります-

<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br>
   DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>

ここで、より大きなテキストボックス、つまりより広い幅が必要だとします。そのために、size属性を使用して幅を数値で設定しました-

<input type="text" name="id" placeholder="Enter UserId here..." size = "25" required>

  1. HTMLリスト属性

    HTMLリスト属性は、HTMLドキュメントの要素の事前定義されたオプションを含む要素を参照します。 構文 以下は構文です- <input list=”text”> HTMLリスト属性の例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;       background-colo

  2. HTMLmaxlength属性

    HTML maxlength属性は、HTMLドキュメントの入力HTML要素で許可される最大文字数を定義します。 構文 以下は構文です- <input maxlength=”text”> HTMLmaxlength属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;