반응형

📢<form> 태그

▼ 사용자 입력을 위한 폼을 만드는데 사용

▼ Action = 양식이 제출 될 때 폼 데이터를 전송하는 위치지정

▼ Method = post , get

- 폼 데이터를 전송할때 사용하는 방법을 지정

- get : url 에 데이터가 출력되면서 전송되는 형태

- post : http request 본 문 내에서 전달되는 방식

form 태그에 action 하고 method 속성을 안넣으면 웹표준검사에서 통과를 못한다

 

📋<fieldset>

- 폼의 그룹

- 요소 주위에 상자를 그림

 

📋<legend>

- <fieldset> 의 제목을 정의

<form action="" method="">
    <fieldset>
        <legend>로그인</legend>
        로그인이 실제 들어갈 코드
    </fieldset>
</form>

 

반응형

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - LIST 태그 (UL , OL , DL 태그)  (0) 2019.04.18
HTML4 - Table (테이블)  (0) 2019.04.16
HTML4 - form 태그의 enctype 속성 (파일 업로드)  (3) 2019.04.16
HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
반응형

◎ POST 또는 GET 을 사용하는 이유

▼ 내용

post 는 데이터의 crud 중 cud를 할경우는 무조건 post

select 만 할경운 get 방식으로 해도 상관없다


◎ FORM 데이터 받기 (POST)

var qs = require('querystring'); var app = http.createServer(function(request,response){ var body = ''; request.on('data',function (data){ //request 데이터 body += data; if (body.length > ie6){ //ie 6 은 숫자 request.connection.destroy(); // 접속끊는 함수 } }); request.on('end',function(){ //data가 끝낫을경우 end var post= qs.parse(body); //body 를 쿼리스트링으로 형식바꿈 console.log(post); // queryString 출력 }) response.writeHead(302, {Location: `/?id=${}`}); //요청한 주소로 리다이렉션 response.end('sucess'); });

▼ 내용

request.on('data',function(data){ 는

request로 들어온 데이터를 콜백함수의 data 인자값으로 일정 기준으로 조각내서 넣어준다는 뜻입니다. 조각을 내서 넣어주기때문에 전부 다 받으려고 body += data 를 넣어줍니다.

request.connection.destroy(); 는 접속을 끊는 함수입니다. 위에 if문 조건은

데이터가 일정 크기 이상 들어올경우 접속을 끊는 함수를 사용한겁니다.

request.on('end',function(){ 은 request 데이터를 다 받고나서 작동한다.

body 에 request 받은 모든데이터를 querystring 형식으로 바꿔서 다시 post로 담음

form 데이터 출력형식


◎ URL 데이터 받기 (GET)

//요청이 http://localhost:3000/?id=ohayo 일경우 var url = require('url'); var app = http.createServer(function(request,response){ var _url = request.url; // ?id=ohayo var queryData = url.parse(_url,true).query; // { id: 'ohayo' } var title = queryData.id; // ohayo });

▼ 내용

request 객체에서 url 을 뽑은다음 require('url').parse(리퀘url,true) 를 뽑으면 아래와같이 나온다.

즉 url 에서 ? 앞전꺼 제거한 뒤에 붙은 데이터 get 방식을 객체화 시키는 방법이다.



반응형

+ Recent posts