HTML : 유효성 검사(ft.form, input)

24500 단어 htmlhtml

유효성 검사

입력값이 정해진 규칙에 합당한지 확인 및 검사

속성

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/

VBS 해독 For MS Script Encode
java 해석 xml에서 자주 사용하는 몇 가지 방식 요약

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage