form은 사용자의 데이터를 서버에 전송하는 방법이다.

 

문법

<form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">
    텍스트 필드, 라디오 버튼, 체크박스와 같은 컨트롤을 생성하는 태그
</form>

  - action: 사용자가 입력한 데이터를 전송할 서버의 URL
  - method : 사용자가 입력한 데이터를 전송하는 방법
    * get : action에 입력한 url에 파라미터의 형태로 전송
    * post : header의 body에 포함해서 전송

 

텍스트 입력은 사용자로부터 텍스트를 입력받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 <textarea>를 이용한다.

 

문법

<input type="text" name="값의 이름" value="값" disabled="disabled" readonly="readonly"/>
  - type : text를 사용해야할 텍스트 필드가 됨.
  - name : 입력한 데이터의 이름
  - value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시됨.
  - disabled : 값으로 disabled를 지정하면 텍스트 필드가 불능 상태가 됨. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않음.
  - readonly : 값으로 readonly를 지정하면 텍스트에 값이 입력되지 않음. 서버로는 데이터 전송됨.

 

예제

<!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="text" name="id" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

 

예제 설명

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

 

 

아이디 : 옆에 텍스트박스를 통해 글을 작성할 수 있고, 아래 제출 버튼을 누를수 있다. 제출버튼에 대한 코딩이 없으므로 눌러도 값이 전송되진 않는다.

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

라디오 버튼  (0) 2017.12.11
비밀번호, hidden data, textarea  (0) 2017.12.11
head, meta, title  (0) 2017.12.11
  (0) 2017.12.11
이스케이핑  (0) 2017.12.11
블로그 이미지

꼴통보안인

,

head, meta, title

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

head는 문서의 내용 자체가 아닌 문서의 내용이 어떤 내용을 담고있는가를 설명하는 정보를 담는 태그다.

 

meta는 문서에 대한 정보를 기술하는 태그다.

 

문법

<meta name="" content=""/>
  - name
    * description : 문서에 대한 설명. 검색엔진에서 중요하게 다룸.
    * keywords : description과 비슷. 태그와 같음.
  - http-equiv
    * Content-Type : 컨텐츠 타입 확인
    * refresh : 페이지 이동

 

예제

  - metaexample1.html
<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="다음은 검색 엔진" />
        <meta name="keywords" content="다음, HTML, HEAD, META" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
</html>

 

  - metaexample2.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="2;url=https://www.naver.com/">
    </head>
</html>

 

예제 설명

  - metaexample1.html

예제를 html 파일에 코딩하여 실행해도 특별히 나오는 화면은 없다. 일반적으로 소스코드를 통해서 문서를 설명하는 예제이다.

 

  - metaexample2.html

예제를 html 파일에 코딩하여 실행하면 2초 뒤에 네이버 웹페이지로 이동한다.

 

title은 문서의 제목을 정의하는 마크업이고, 제목을 제목 표시줄에 출력해서 문서를 찾는데 도움을 준다. 검색엔진에서 중요한 정보로 취급된다.

 

예제

<!DOCTYPE html>
<html>
    <head>
        <title>네이버</title>
    </head>
    <body>
    네이버는....
    </body>
</html>

 

예제 설명

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

 

 

head에 title을 추가하여 빨간 박스에 있는 것과 같이 title이 네이버로 설정되었다. body에 설정한 네이버는....도 출력되었다.

 

 

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

비밀번호, hidden data, textarea  (0) 2017.12.11
폼(form), 텍스트 입력  (0) 2017.12.11
  (0) 2017.12.11
이스케이핑  (0) 2017.12.11
iframe, frame  (0) 2017.12.11
블로그 이미지

꼴통보안인

,

Programming/HTML 2017. 12. 11. 22:59

는 데이터를 일목요연하게 표현하기 위한 방법이다. 데이터를 구조화 할때 사용하고, 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css 등을 이용한다.. th는 데이터 그룹의 제목(header cells)에 해당하고, td는 th에 속하는 데이터 그룹(standard cells)에 해당한다.

 

문법

<table>
    <tr>
       <th>제목</th>
    </tr>
    <tr>
       <td>데이터</td>
    </tr>
</table>

 

예제

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <table border="1">
            <tr>
                <td>이름</td><td>성별</td><td>나이</td>
            </tr>
            <tr>
                <td>홍길동</td><td>남</td><td>20</td>
            </tr>
            <tr>
                <td>임꺽정</td><td>여</td><td>21</td>
            </tr>
        </table>
    </body>
</html>

 

예제 설명

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

 

 

첫번째 행에는 이름, 성별, 나이가 입력되고, 두번째 행에는 홍길동의 정보, 세번째 행에는 임꺽정의 정보가 입력된다.

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

폼(form), 텍스트 입력  (0) 2017.12.11
head, meta, title  (0) 2017.12.11
이스케이핑  (0) 2017.12.11
iframe, frame  (0) 2017.12.11
목록  (0) 2017.12.11
블로그 이미지

꼴통보안인

,