728x90
반응형
pattern속성 |
|
|
- pattern속성은 input요소에 입력된 값을 검사하기 위한
정규표현식(regular expression)을 설정할 수 있다. - 정규표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 말한다.
- 정규표현식 사용 가능 범위 : input요소의 type속성값이
text, password, email, tel, url인 경우 사용가능함. - 값을 하나라도 입력하여야 유효성검사(pattern형식에 맞는지)가 이루어짐 - Safari, 익스플로러 9이하 버전은 지원 안됨.
1. [a-zA-Z0-9] : 영어소문자, 영어대문자, 숫자 중 개수에 상관없이 사용가능 2. [@] : '@'문자만이 나와야 함
3. [ . ] : '.'문자만이 나와야 함
4. [ . ]* : '.'문자가 나와도 되고 나오지 않아도 됨
5. [a-zA-Z0-9]* : 영어소문자, 영어대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨
6. [0-3]{3} : 숫자는 0~3까지 사용가능하며 3자리 숫자까지만 사용 가능. 자바스크립트의 정규표현식에서 따온 것임.
7. [ㄱ-ㅎ] : ㄱ~ㅎ까지의 자음만
8. [ㄱ-ㅎ가-힣] : ㄱ~ㅎ까지의 자음포함, 가~힣까지의 한글포함
** _ : 1자 입력 ** + : 여러 자 입력 |
<input type="tel" id="phone" name="phone"
placeholder="010-1234-5678" pattern="(010)-[0-9]{4}-[0-9]{4}"> <input type="text" id="phone" name="phone"
pattern="(0-1){3}-[0-9]{4}-[0-9]{4}"> <input type="email" id="email" name="email"
pattern="[a-zA-Z0-9_]+[@][a-zA-Z]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*"> 1자 이상 입력하여 시작 여러 자 입력 |
name |
|
| 데이터를 참조할 때 사용할 이름을 지정한다. |
sadf
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>input elements</h2> <form action="input ele.html" method="get"> <label for="id">아이디: </label> <input type="search" id="id" name="id" pattern="[a-zA-Z0-9_]+" minlength="6" maxlength="20" required><br> <!-- 아이디 : 영어대소문자, _만 가능하도록 6~20자 이내가 되도록 설정 --> <label for="pwd">Password:</label> <input type="password" id="pwd" name="pwd" pattern="[a-zA-Z0-9!_\-!]+" minlength="6" maxlength="20" required><br> <!-- 영어대소문자, 숫자, _,-,!까지만 6~20자 이내가 되도록 설정 --> <label for="username">Username: </label> <input type="text" id="username" name="username" value="홍길동" pattern="[a-zA-Z가-힣\s]+" required><br> <!-- 가~힣까지만, 영어대소문자만, \s(공백한칸) 까지만 가능하도록 --> <!-- placeholder.속성은 input요소에 입력되어야 할 값에 대한 힌트를 제공 input엘리먼트의 type이 text, password, email, tel, url, search에만 사용 가능. tel: Safari 8이상에서만 지원됨. --> <label for="phone">Phone number: </label> <input type="tel" id="phone" name="phone" placeholder="010-1234-5678" pattern="(010)-[0-9]{4}-[0-9]{4}"><br> <!-- <input type="text" id="phone" name="phone" pattern="(0-1){3}-[0-9]{4}-[0-9]{4}"><br> --> <small style="color: red;">전화번호 입력 예시: 010-1234-5678</small><br> <!-- pattern속성 : pattern속성은 input요소에 입력된 값을 검사하기 위한 정규표현식(regular expression)을 설정할 수 있다. 정규표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 말한다. 정규표현식 사용 가능 범위 : input요소의 type속성값이 text, password, email, tel, url인 경우 사용 가능함. Safari, 익스플로러 9이하 버전은 지원 안됨. 1. [a-zA-Z0-9] : 영어소문자, 영어대문자, 숫자 중 개수에 상관없이 사용가능 2. [@] : '@'문자만이 나와야 함 3. [.] : '.'문자만이 나와야 함 4. [.]* : '.'문자가 나와도 되고 나오지 않아도 됨 5. [a-zA-Z0-9]* : 영어소문자, 영어대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨 6. [0-3]{3} : 숫자는 0~3까지 사용가능하며 3자리 숫자까지만 사용 가능. 자바스크립트의 정규표현식에서 따온 것임. 7. [ㄱ-ㅎ] : ㄱ~ㅎ까지의 자음만 8. [ㄱ-ㅎ가-힣] : ㄱ~ㅎ까지의 자음포함, 가~힣까지의 한글 포함 --> <!-- <label for="email">Email</label> <input type="email" id="email" name="email"><br> --> <label for="email">Email</label> <input type="email" id="email" name="email" pattern="[a-zA-Z0-9_]+[@][a-zA-Z]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*"><br> <label for="homepage">Homepage</label> <input type="url" id="homepage" name="homepage"><br> <input type="submit" value="가입하기"> <input type="reset"> </form> </body> </html>
style="border-radius : 5px ; " 전체
radio
checkbox
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>input elements</h2> <form action="../img/cute_dog.jpg"> <!-- required : 필수 입력 속성. 예전에는 required = "required"로 표현 됨 checked : 미리 선택을 해 놓는 속성. radio, checkbox 엘리먼트에 사용 --> <input type="radio" id="male" name="gender" value="male" required> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female" required> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other" required> <label for="other">Other</label><br> <hr><!-- ----------------------------------------------------------- --> <label><input type="radio" id="red" name="color" value="red">Red</label><br> <label><input type="radio" id="green" name="color" value="green" checked>Green</label><br> <label><input type="radio" id="blue" name="color" value="blue">Blue</label><br> <hr><!-- ----------------------------------------------------------- --> <input type="checkbox" id="fruit1" name="fruit" value="Apple"> <label for="fruit1"> I have an Apple</label><br> <input type="checkbox" id="fruit2" name="fruit" value="Orange"> <label for="fruit2"> I have an Orange</label><br> <input type="checkbox" id="fruit3" name="fruit" value="Lemon"> <label for="fruit3"> I have a Lemon</label><br> <hr><!-- ----------------------------------------------------------- --> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" checked> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br> <!-- input type="image" : submit 버튼과 동일한 역할 버튼을 이미로 설정 가능 불필요한 마우스의 클릭 지점의 x,t 축 좌표값을 같이 붙여 보낸다 input요소에서 widht, height의 독립 속성은 image유형에서만 가능하다. --> <br> 아래의 이미지를 클릭해보세요~<br> <input type="submit" value="전송"> <input type="image" src="../img/submit.png" style="border-radius: 5px;" alt="제출버튼" title="submit버튼을 이미지로"> </form> </body> </html>
728x90
반응형
'[HTML]' 카테고리의 다른 글
| [HTML] style (0) | 2024.02.19 |
|---|---|
| [HTML] <input 속성 - readonly, autofocus, required, placeholder, disabled, checked> (0) | 2024.02.16 |
| [HTML] <input type=" "> (0) | 2024.02.16 |
| [HTML] form, optgroup, option, datalist, fieldset, legend (0) | 2024.02.15 |
| [HTML] id, #, anchor, svg (0) | 2024.02.15 |