HTML:検証(ft.form,input)

24846 ワード
html テキストリンク

検証＃ケンショウ＃


入力値が所定のルールに合致しているかどうかを確認し、確認します.

ツールバーの


required


入力状態確認すなわち、入力されていない場合は入力を求める.
<body>
    <section class="overlay">
      <h1>Guess the right number!</h1>
      <form action="check.html" method="GET">
        <!--Add a required attribute to the input element-->
        <label for="guess">Enter a number between 1-10:</label>
        <br>
        <input type="number" name="guess" id="guess" required>
        <br>
        <input type="submit" value="Submit">
      </form>
    </section>
  </body>

最大最小値の設定


数値範囲の指定
min="最小範囲"max="最大範囲"
<body>
    <section class="overlay">
      <h1>Guess the right number!</h1>
      <form action="check.html" method="GET">
        <label for="guess">Enter a number between 1-10:</label>
        <br>
        <!--Add the min and max attribute to the input-->
        <input type="number" name="guess" id="guess" required min="1" max="10">
        <br>
        <input type="submit" id="submission" value="Submit">
      </form>
    </section>
  </body>

テキスト長の最小値最大値の設定


テキストの長さの制限
minlength="最小長"maxlength="最大長"
<body>
    <section class="overlay">
      <h1>Sign Up</h1>
      <p>Create an account:</p>
      <form action="submission.html" method="GET">
        <!--Add the minlength and maxlength attributes to the input fields-->
        <label for="username">Username:</label>
        <br>
        <input id="username" name="username" type="text" minlength="3" maxlength="15" required>
        <br>
        <label for="pw">Password:</label>
        <br>
        <input id="pw" name="pw" type="password" minlength="8" maxlength="15" required>
        <br>
        <input type="submit" value="Submit">
      </form>
    </section>
  </body>

検証＃ケンショウ＃


入力ルールが固定されていることを確認します
pattern=[ルール]
   <body>
    <section class="overlay">
      <h1>Sign Up</h1>
      <p>Create an account:</p>
      <form action="submission.html" method="GET">
        <!--Add the minlength and maxlength attributes to the input fields-->
        <label for="username">Username:</label>
        <br>
        <input id="username" name="username" type="text" minlength="3" maxlength="15" required>
        <br>
        <label for="pw">Password:</label>
        <br>
        <!--소대문자 a~z 숫자 1~9까지-->
        <input id="pw" name="pw" type="password" minlength="8" maxlength="15" required pattern="[a-zA-Z0-9]+">
        <br>
        <input type="submit" value="Submit">
      </form>
    </section>
  </body>
ソース:https://www.codecademy.com/
一般化(=継承)
sort_main_extable