[ HTML ] 입력 양식

input types

기본 형식

    <form action="http://localhost/login.php">
        <p>비밀번호 : <input type="password" name="pwd" value="1234></p>
        <input type="submit">
    </form>

 

• color  
• date 
• datetime 
• datetime-local  
• email 
• month 
• number
• range
• search
• tel
• time
• url
• week

    <form action="http://localhost/form.php" method="post">
        <p>number1  : <input type="number" ></p>  <!-- 숫자만 입력 가능 -->
        <!-- 숫자범위지정, (모바일에서)키보드 띠우기 가능 -->
        <p>number2  : <input type="number" min="10" max="15"></p>

        <p>date     : <input type="date" name="datev"></p>
        <p>month    : <input type="month" name="monthv"></p> <!-- 년월 -->
        <p>datetime : <input type="datetime"></p>
        <p>datetime-local : <input type="datetime-local"></p>
        <p>time     : <input type="time"></p>  
        <p>week     : <input type="week"></p> 
        
        <p>search   : <input type="search"></p>

        <p>email    : <input type="email"></p>
        <p>tel      : <input type="tel"></p>

        <p>url      : <input type="url"></p>     

        <p>range    : <input type="range" min="0" max="100"></p><!-- 년월 -->

        <p>color    : <input type="color"></p>
        <input type="submit">
    </form>

 

input type 속성

    <form action="http://localhost/form.php" method="get">
        <form action="login.php" autocomplete="on">
            <input type="text" name="id" placeholder="id를 입력해주세요." autofocus>
            <input type="password" name="password" autocomplete="off" placeholder="비밀번호를 입력해주세요.">
            <input type="submit">
        </form>
        <input type="submit">
    </form>

 

• autocomplete : 이전 입력내용 불러와 자동완성
• placeholder : label 대체 효과
• autofocus : 페이지 접속시 자동 포커스
• required : 꼭 값을 입력해야 제출됨

 

입력값 validation

 

        <form action="register.php">
            <input type="text" name="id" placeholder="아이디를 입력" required pattern="[a-zA-Z].+[0-9]">
            <input type="email" name="email" placeholder="이메일 입력">
            <input type="submit">
        </form>

 

• input type에 따른 입력값 validation
• required : 꼭 값을 입력해야 제출됨
• pattern에 정규표현식 사용 가능

 

https://opentutorials.org/course/1058

HTML 사전 - 생활코딩