콤보 박스

Programming/HTML 2017. 12. 12. 00:05

콤보박스는 여러개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤이다.

 

문법

<select name="값의 이름" multiple="multiple">
    <option value="선택될 경우 name의 값이 됨" selected="selected">값의 대한 표시값</option>
    ... option 반복
</select>
  - multiple : 이 속성의 값을 multiple로 지정하면 여러개의 항목을 선택할 수 있은 컨트롤이 됨.

 

예제

  - comboboxexample.html

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_single.php" method="POST">
                        관심사 : <br />
                        <select name="interest">
                                <option value="programming">프로그래밍</option>
                                <option value="design" selected="selected">디자인</option>
                                <option value="planning">기획</option>
                        </select>
                        <input type="submit" />
                </form>
        </body>
</html>

 

  - example_receive_single.php

<html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <body>
          당신의 관심사는? <?=$_POST['interest']?>
    </body>
</html>

 

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

처음에 디자인에 selected 옵션이 설정되어 디자인으로 나와있고, 스크롤을 내려서 다른 항목으로 바꿀수 있다. 원하는 항목을 선택 후 제출 버튼을 누르면 라디오 버튼에서 했던 것과 같은 결과가 나온다.

'Programming > HTML' 카테고리의 다른 글

파일 업로드  (0) 2017.12.12
체크박스  (0) 2017.12.12
라디오 버튼  (0) 2017.12.11
비밀번호, hidden data, textarea  (0) 2017.12.11
폼(form), 텍스트 입력  (0) 2017.12.11
블로그 이미지

꼴통보안인

,

라디오 버튼

Programming/HTML 2017. 12. 11. 23:57

라디오 버튼은 여러개의 항목 중에서 하나만을 선택할 수 있도록 제한하는 컨트롤이다.

 

문법

<input type="radio" name="값의 이름" value="값" checked="checked">

 

예제

  - radiobuttonexample.html
<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_single.php" method="POST">
                    관심사 : <br />
                    <input type="radio" name="interest" value="programming" checked="checked" /> 프로그래밍<br />
                    <input type="radio" name="interest" value="design" /> 디자인<br />
                    <input type="radio" name="interest" value="planning" /> 기획<br />
                    <input type="submit" />
                </form>
        </body>
</html>

 

  - example_receive_single.php

<html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <body>
        당신의 관심사는? <?=$_POST['interest']?>
    </body>
</html>

 

예제 설명

해당 예제는 웹서버를 구성해야 가능하다.(apm을 활용) 예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

프로그래밍에 checked 옵션이 있으므로 프로그래밍에 체크되어있다. 만약 다른곳에 checked 옵션이 있다면 그곳에 체크 되어있었을 것이다. 제출 버튼을 누르면 체크한 정보가 example_receive_single.php 파일에 전송되어 아래와 같은 화면이 출력된다.

 

 

'Programming > HTML' 카테고리의 다른 글

체크박스  (0) 2017.12.12
콤보 박스  (0) 2017.12.12
비밀번호, hidden data, textarea  (0) 2017.12.11
폼(form), 텍스트 입력  (0) 2017.12.11
head, meta, title  (0) 2017.12.11
블로그 이미지

꼴통보안인

,

비밀번호는 보안이 중시되는 데이터의 입력을 받는다.

 

예제

<!DOCTYPE html>
<html>
    <head>
        <title>네이버</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <form action="url" method="GET">
            비밀번호 :
            <input type="password" name="password" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

 

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

input type을 password로 지정하였기 때문에 텍스트 입력창에 입력을 해도 평문으로 보이지 않는다.

 

hidden data는 화면상에 표시되지 않는 컨트롤을 생성하고, 서버로 전달할 데이터지만 사용자에게 노출할 필요가 없는 데이터인 경우 사용한다.

 

예제

<html>
    <head>
        <title>네이버</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <form action="url" method="GET">
            이름 :
            <input type="text" name="name" />
            <input type="hidden" name="language" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

 

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

위와 같이 input type을 text로 지정한 것만 보이고 hidden으로 지정해놓은 것은 안보인다.

 

textarea는 여러줄의 텍스트를 입력할 때 사용한다.

 

문법

<textarea name="값의 이름" rows="행의 수" cols="열의 수" disabled="disabled" readonly="readonly">값</textarea>
  - rows : 입력한 행의 수 만큼 높이가 정해짐
  - cols : 입력한 열의 수 만큼 폭이 정해짐.

 

예제

<!DOCTYPE html>
<html>
    <head>
        <title>네이버</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <form action="url" method="GET">
            내용 : <br />
            <textarea rows="5" cols="20"></textarea> <br />
            <input type="submit" />
        </form>
    </body>
</html>

 

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

rows가 5이기 때문에 5줄이 생성되고, cols가 20이므로 20칸 짜리 텍스트 입력 받는 곳이 생성되었다.

'Programming > HTML' 카테고리의 다른 글

콤보 박스  (0) 2017.12.12
라디오 버튼  (0) 2017.12.11
폼(form), 텍스트 입력  (0) 2017.12.11
head, meta, title  (0) 2017.12.11
  (0) 2017.12.11
블로그 이미지

꼴통보안인

,