티스토리 뷰

웹 개발

HTML : 몇가지 Input Type에 대한 예제및 정리

Andrew Shin 2015. 5. 24. 14:16
예제 1. 로그인 페이지 만들기

1
2
3
4
5
6
7
8
9
10
11
<h1>수강생 로그인</h1>
    {% if form.errors %}
        <p>사용자 이름 혹은 비밀번호가 일치하지 않습니다. 다시 시도해 보세요.</p>
    {% endif %}
        <Form method="POST" name="login" AUTOCOMPLETE="off" action="ready/0">
            {%  csrf_token  %} 
            이름(ID) 입력 : <input type="text" size="15" name="id"><br>
            비밀번호입력 : <input type="password" name="pw" size="15"><br><br>
            <input type="submit" value="로그인">
            <input type="reset" value="재입력">
        </Form>
cs

HTML 파일을 하나 만들어서 <BODY>의 안쪽에 위 코드를 추가합니다.

아래와 같은 출력형태가 나오는 것을 확인할 수 있습니다.


<출력형태>




코드의 안쪽에 보면 <input 으로 시작하는 코드가 자주 보이는데, input type에 대한 이야기를 해볼까 합니다. 


1. INPUT TYPE=TEXT

첫번째로 텍스트 필드는 '문자열을 입력받기 위한' 용도로 사용되며, 이름을 규정짓는 NAME 속성과, 길이를 결정하는 SIZE 속성이 있습니다.

1.1 NAME - 텍스트 필드의 이름을 의미합니다. (지난 강좌 참조)
1.2 SIZE - 텍스트 필드의 길이를 의미합니다. (지난 강좌 참조)
1.3 VALUE - 텍스트 필드에 보여지는 기본 문자열 값을 의미합니다.
1.4 MAXLENGTH - 텍스트 필드에 쓸 수 있는 최대 문자의 수를 지정합니다.
     (여기서 지정한 값보다 긴 글을 쓰기 위해 키보드를 아무리 눌러도 입력되지 않습니다.)
1.5 READONLY - 이 속성을 지정하면 텍스트 필드는 읽기 전용이 되어 쓰기가 되지 않습니다.

Maxlength 가 Size 보다 크게 설정한 경우


Maxlength 가 Size 보다 작게 설정한 경우


2. INPUT TYPE=PASSWORD

PASSWORD 는 단어의 뜻 그대로 '비밀번호' 를 입력 받을때 주로 사용합니다.
사용 방법과 형태, 속성까지.. 모두 텍스트 필드와 완전히 일치합니다만 보안의 이유로
우리가 입력하는 모든 값이 '*' 로 표시된다는 것이 텍스트 필드와 다른 점이 되겠습니다.

값을 입력해 보시면 아시겠지만 어떤 글자를 입력하더라도 출력형태와 같이 모두 '*' 문자로 보여지게 됩니다.


예제 2. 문제 목록 출력하기

1
2
3
4
5
6
7
8
        <form name="exam_number">
            <h4>{{exam.ex_text}}</h4>
            <input type="radio" name="select_number" value="1" checked="checked"> 1번. {{exam.ex_select_1}}
            <input type="radio" name="select_number" value="2"> 2번. {{exam.ex_select_2}}
            <input type="radio" name="select_number" value="3"> 3번. {{exam.ex_select_3}}
            <input type="radio" name="select_number" value="4"> 4번. {{exam.ex_select_4}}
            <input type="radio" name="select_number" value="5"> 5번. {{exam.ex_select_5}}
        </form>
cs


<출력형태>


3. INPUT TYPE=RADIO
RADIO 버튼은 여러개의 보기 중에서 단 하나만을 선택할 때 사용하는 방식입니다. 이 RADIO 버튼에도 몇가지 속성이 있는데요. 그 내용은 다음과 같습니다.

3.1 NAME - 이 보기들의 이름을 의미합니다. 하지만 한가지 기억하셔야 할 것은 만약 보기를
      다섯 개 사용한다고 가정하면 그 다섯개의 NAME 을 모두 같게 해줘야 한다는 점입니다.
      (그래야만 같은 내용의 보기로 인정하게 되는 것입니다.)
3.2 VALUE - 이 보기의 고유 값으로서, 다음 페이지로 전달되는 실제 값입니다.
      (텍스트 필드에서의 VALUE 속성과는 의미가 다르다는 점에 주목해 주시기 바랍니다.)
3.3 CHECKED - 이 속성을 지정하면 그 보기에는 미리 체크되어 있게 됩니다.

보시는 것처럼 다섯 개의 보기를 나열해 보았습니다.
이 중에서 1번 보기에 CHECKED 속성을 사용해서 미리 선택되어 보이게끔 설정했습니다.
다른 보기를 클릭하시면 기존에 선택된 보기가 해제되는 것을 확인하실 수 있겠습니다.


위 3가지 type 말고도 Checbox 혹은 select와 같은 타입도 자주 사용되니 필요하다면 찾아서 익혀두도록 합시다.






댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함