[input Tag] Input태그 사용법, 정규식표현

안녕하세요 아기크롱입니다.

작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^!!

그럼 시작합시다

 

다양한 <input> 태그에 대해 알아봅시다.

 

입력태그 #1: input 

<input type= "?" />
- text : <키보드입력>-자동 출력한다.
- password: 키보드입력, ****로 표시된다.

- radio : (싱글초이스)name을 gender로 했을때, gender라는 이름은 하나만 선택할 수 있다. 
            = 남여 하나만 고를 수 있다(name선언안하면 둘 다 선택된다) 따라서, gender는 단일선택
- checkbox: (멀티초이스)gender라는 이름이 같을때, 복수개 선택가능하다. 
            = radio에서 gender를 안적고 할 수 도 있다.

- hidden: 화면에 안보이지만 자동으로 전송값을 넘긴다. 화면에 드러나지않고 자동으로 값을 넘기는 방법 
            = hidden은 입력을 하지 않기때문에 반드시 values가 필요하다.

- file: <input type=file name="?"/>  형태를 해야 파일찾기를 할 수 있다.
            = 그렇다면 찾은 파일은 어떻게 전달하는가? fome action a.jsp로 전달할 수 있다.
- button : <마우스클릭>- 자바스크립트언어로 구동한다. (text버튼)
            = image(웹서버 전송명령버튼, 이미지형태) (이미지버튼)
            = submit(웹서버 전송명령버튼)이 있다. (text버튼)
            = reset은 웹서버 전송취소입력값 삭제버튼이다. (text버튼)

  

입력태그 #2: form

<form action =? enctype=""multipart/form-data">
<form action="none.jsp" enctype="multipart/form-data"> submit을 누르면 jsp로 전송한다.     
(enctype="multipart/form-data"를 통해 모든 데이터가 전송된다.)

 

(0) form action="서버파일명"  

(1) <input type=text">1줄짜리 <input type="submit/image">
(2) <textarea rows="10" cols="100" name="hi"> 여러줄
(3) <select name="?" multiple="multiple"> 
         <option value="bmw"> bmw </option>의 메뉴들을 반복

  <option value="hyundai" selected> 현대자동차 </option>하면 현재선택됨. multiple에 의해 다중선택이 가능하다.
 

Name참조변수
Name="변수명" value="초기값"이란????
- 지정된 값을 입력받고 내보내거나 전송하기위해서는 무조건 name을 선언해줘야한다. (name을 쓰는 이유는 입력된 값을 저장할 변수다.)
- 만약 변수명의 값이 중복되게된다면 배열과같은 자료구조를 통해서 구분해야한다.
- 보여지는 초기값을 value를 쓴다.

 

※이쯤되면 궁금하니까, name과 id의 차이점에 대하여 구글링해봤습니다※

name은 page 안에서 중복되어 사용이 가능하며 action에 해당하는 페이지로 전달하는 파라미터로 사용된다.

id는 page 안에서 중복 사용 불가하며 주로 JavaScript에서 다룰려고 지정하는 것이다. name도 자바스크립트로 속성이나 값을 변경 할 수 있으나 중복값을 갖기 때문에 id로 접근하는 것을 주로 사용한다. document.getElementById(id) 를 통해서 해당 엘리먼트Object 를 가져온다.

*파이어 폭스나 크롬에서는 document.getElementById는 id로만 읽습니다.

 

이름	name	id
중복사용 여부	o	x
주 용도	get/post 방식으로 서버에 전달하는parameter	JavaScript에서 다룰려고 지정
사용법 예	equest.getParameter(parameterName)	document.getElementById("")

 

input태그 #3: 추가요소 

<input type="color/date/time/datetime/datetime-local/range/email/search/number/tel/month/week/url

<input type= " " autofocus placeholder="글자" readonly="readonly" required="required" pattern />
(autofocus는 초기커서를 보여준다.)
(placeholder는 회색글씨의 힌트값)
(readonly는 입력을 못하도록 , required는 필수사항으로 작성할 것이기에 같이 쓰면 안된다.)
(email이나, tel뒤에 pattern="내용"의 정규식의 수식을 사용한 이메일의 유효주사 검증방법)
(pattern은 결국 sql문의 check조건문과 같고, 보여주는 경고문으로 title=""을 쓸수있다.)

 

input태그 pattern을 보다보니 정규식 패턴을 공부해야할 것 같아요!!!

 

= ^[a-zA-Z] : 시작은 영문자만 제한을 걸어둔다.
= {10} :10자리만 가능하다는 횟수의 고정값이다.

= {1,5} : 1부터 5자리수중에 아무거나 가능하다는 범위값이다.

= *  :별은 0회반복을 의미한다.

= +  :최소 0이 아닌, 최소의 1자리는 있어야된다는 필수표시이다.

= .  :한 개의 어떤 문자와도 일치. (정규식의 .이 아닌 그냥.을 쓰기위해서는 \.으로써야한다.)

= (a |b |c ) :범위가 존재하지않는 문자일 경우에 소괄호에 or연산자를 이용한다

= [A-Za-z0-9] : A에서부터 Z까지의 범위 아무거나, a에서부터 z까지의 범위 아무거나, 0에서부터 9까지의 범위 아무거나

    영숫자 전체사용가능하다.(숫자나 영문자만 가능)

※ 정규식표현의 경우에는, 언어 공용이기때문에 알아두면 좋다. 기본적인 적용사례에 대하여 말씀드리자면 아래와 같다

 

1. 기본적인 정규식 

 

2. 자주쓰이는 정규식 

 

3. 자바에서 자주쓰이는 정규표현식

자바에서 정규식표현식 검사하는데, match를 사용해야 한다는 것을 알았다. 

/** 문자열의 형식을 검사하는 기능을 갖는 클래스 */ 
import java.util.regex.Pattern; 
public class PatternChecker {



 /** 숫자 모양에 대한 형식 검사 */ 
public static boolean isNum(String str) { 
return Pattern.matches("^[0-9]*$", str); } 




/** 영문으로만 구성되었는지에 대한 형식 검사 */ 
public static boolean isEng(String str) { 
return Pattern.matches("^[a-zA-Z]*$", str); }

 


/** 한글로만 구성되었는지에 대한 형식 검사 */ 
public static boolean isKor(String str) { 
return Pattern.matches("^[ㄱ-ㅎ가-힣]*$", str); } 




/** 영문과 숫자로만 구성되었는지에 대한 형식 검사 */ 
public static boolean isEngNum(String str) { 
return Pattern.matches("^[a-zA-Z0-9]*$", str); } 




/** 한글과 숫자로만 구성되었는지에 대한 형식 검사 */ 
public static boolean isKorNum(String str) { 
return Pattern.matches("^[ㄱ-ㅎ가-힣0-9]*$", str); } 




/** 이메일 형식인지에 대한 검사 --> "아이디@도메인"의 형식을 충족해야 한다. */ 
public static boolean isEmail(String str) { 
return Pattern.matches("[0-9a-zA-Z]+(.[_a-z0-9-]+)*@(?:\\w+\\.)+\\w+$", str); } 




/** 핸드폰번호인지에 대한 형식검사. 반드시 앞자리가 010,010,016~9사이를 충족해야 하며, 각 부분에 대한 자리수도 충족시켜야 한다. "-"는 허용하지 않는다. */ 
public static boolean isCellPhone(String str) { return Pattern.matches("^01(?:0|1|[6-9])(?:\\d{3}|\\d{4})\\d{4}$", str); } 




/** 전화번호인지에 대한 형식검사. 각 연결부는 "-"로 구분되어야 한다. 각 부분에 대한 자리수도 충족시켜야 한다. "-"는 허용하지 않는다. */ 
public static boolean isTel(String str) { return Pattern.matches("^\\d{2,3}-\\d{3,4}-\\d{4}$", str); } 




/** 주민번호에 대한 글자수 및 뒷자리 첫글자가 1~4의 범위에 있는지에 대한 검사. "-"는 허용하지 않는다. */ 
public static boolean isJumin(String str) { return Pattern.matches("^\\d{6}[1-4]\\d{6}", str); } 




/** 아이피주소 형식에 대한 검사 */ 
public static boolean isIP(String str) { 
return Pattern.matches("([0-9]{1,3})\\.([0-9]{1,3})\\.([0-9]{1,3})\\.([0-9]{1,3})", str); } }



출처: http://myeonguni.tistory.com/1555 [명우니닷컴]

 

 

※ 앞으로는 <body>보다는 <heap>안에서 작성한다. 

   예를들면, <head><style> body{ background-color: #E6B36D; } </style></head>

 

※ 참고url 

Border 선요소 http://ododog12.tistory.com/52 Border

ul, ol, li 정렬 실사용 http://onlyian.tistory.com/15

div 정렬 http://aboooks.tistory.com/101  

 

코드결과

 

 

2-1. 주요코드

<!--2번 -->
        <form action="none.jsp" enctype="multipart/form-data">
        <h1> 로그인부터 하세요</h1>
        <table border="2" width=50% height=50% align="center">
            <tr>
                <td>아이디입력 </td>
                <td><input type="text" style="background-color:#C1CDCD" name="id" placeholder="8자리가능" required="required"/></td>
                <td rowspan="2"><input type="button" name="id" value="로그인버튼"/></td>
            <tr>
                <td>암호입력 </td>
                <td><input type="password" name="pw" style="background-color:#C1CDCD"/></td>
            
            <tr><td><input type="hidden" value="asg"/></td>
            
            <tr><td> 추가정보 : 성별선택 </td>
                <td colspan="3"><input type="radio" name="gender"/> 남자  <input type="radio" name="gender"/> 여자</td>
                
            <tr><td> 추가정보 : 자신있는 과목(복수)) </td>
                <td colspan="3"> <input type="checkbox" name="subjeck"/> java 
                                 <input type="checkbox" name="subjeck"/> oracle
                                 <input type="checkbox" name="subjeck"/> html
                                 <input type="checkbox" name="subjeck"/> jquery </td>
            <tr><td> 파일 업로드 </td>
                <td><input type=file name="f" style="background-color:#C1CDCD"/></td>
                
            <tr><td><textarea cols=50 rows="5" style="background-color:#C1CDCD"> 여기에 작성하세요</textarea></td>
                <td><select name="menu" multiple="multiple">
                        <option> 짜장면 </option>
                        <option> 짬뽕 </option>
                        <option> 밥 </option>
                        <option> 라면 </option>
                        <option selected> 순두부  </option>
                        <option> 탕수육 </option>
                        <option> 돼지 </option>
                        <option> 닭 </option>
                    </select>
            <tr><td><input type="submit" value="서브밋버튼"/></td>
                <td><input type="image" src="../thumbnails/google.png"/></td>
                <td><input type="reset" value="입력값초기화버튼"></td>
                
        </table>
        </form><br><br>
 

 

3-1. 주요코드

    <div style="border: white 10px solid"> 
        <form action="html5.jsp"></br> <!-- html5.jsp로 전송한다고 가정한다. 또한, 공식처럼 무조껀 submit을 쓴다-->
 
            지역날짜 : <input type="datetime-local"></br>
            날짜시간 : <input type="datetime"></br>
            날짜 : <input type="date"></br>
            시간 : <input type="time"></br>
            
            색상 : <input type="color"></br>
            주 : <input type="week"></br>
            월 : <input type="month"></br>
            일 : <input type="date"></br>
            
            범위 : <input type="range" min=1 max=10 value=7></br> <!-- 7정도에 있다 -->
            숫자 : <input type="number" max=20 step=3 value=3></br> <!-- value 현재는 3부터시작 -->
                                                                       <!-- 3자리~4자리 -->
            번호입력: <input type="phone" pattern="^(010|011|016|019)-[0-9]{3,4}-[0-9]{4}$" title="###-####-####"></br>
            이메일 : <input type="email" pattern="^\W{1,}[A-Za-z-0-9] *@ [A-Za-z-0-9] +\.(com|org|net)"></br>
                                      <!--숫자와 영문자구성 1자리이상 @숫자와 영문자구성 1자리이상 com또는 org-->
                                      <!--^[a-zA-Z][A-Za-z0-9]*@ [A-Za-z0-9] +\.(com|org|net) -->
          홈피주소 : <input type="url" pattern= http[s]{0,1}://\w+(\.\w+)*$></br>
                                                            <!-- 문자.문자를 반복 -->
                                                            <!-- http://www.multicampus.co.kr -->
                                                            <!-- http://www.naver.com -->
                                                            <!-- http://www.multicampus-->
            <input type=submit value="전송">
        </form><br></div>
 

코드결과