이진욱의코딩

폼(form)태그에 대해 알아봅시다. 본문

HTML

폼(form)태그에 대해 알아봅시다.

Crucifi 2019. 9. 18. 01:29

폼은 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 합니다.

단순히 텍스트의 내용만 보여주는 페이지에는 필요 없지만 서로 데이터를 주고받으며 움직이는 웹 페이지일 경우 반드시 드어가는 요소입니다. 예를 들어 로그인할 때 아이디와 비밀번호는 form태그가 자신의 내부에 있는 input박스 정보를 넘기는 것입니다.  이런 폼에 대해서 예제와 함께 하나씩 알아봅시다.

 

l  action : 폼 내부에 데이터를 보내는 목적지 URL을 지정한다.

l  actocomplete : HTML5 HTML5에 추가되었으며 양식의 자동완성을 지정한다.

l  enctype : 넘기는 Content 타입을 지정하는데 주로 파일을 넘길 때 많이 사용한다. type 은 “multipart/form-data” 로 지정해서 사용한다.

l  method : 폼을 서버로 전송하는 http 방식을 지정한다. POST와와 GET 이 있다.

l  name : 폼을 식별하기 위한 이름을 지정한다.

l  target : action action에서 지정한 스크립트 파일이 현재나 다른 위치에서 열리도록 지정한다.

l  accept-charset : 폼 전송에 사용될 문자 인코딩을 지정한다.



기본적으로 form은 body태그 안에 위치하고 있습니다.

 

우선 이번 시간에 무엇을 만들 것인지 결과를 먼저 보도록 합시다.

 

오늘의 결과입니다.

 

맨 위에 나온 것부터 차근차근해보도록 합시다.

 

  <input type="text" disabled="disabled" name="id"   maxlength="10" value="ID를 적으세요."><br>

글자를 적는 칸이기 때문에 input타입을 text로 합니다. 코드 중 disabled를 적으면 그 칸은 봉쇄됩니다. maxlength는 최대 적을 수 있는 글자 수입니다. 

 

  <input type="password"><br>

비밀번호를 적는 칸이기 때문에 타입을 password로 해서 글을 적으면 *****이런 식으로 나오게 합니다.

 

<input type="submit" value="전송"><br>

다음은 버튼 부분입니다. 위와 같이 타입의 속성 값으로 submit을 넣어주면 서버와 통신을 하게 되는 버튼이 생성됩니다.

 

  <input type="checkbox" value="overwatch" name="game" >옵치

타입을 checkbox로 하면 설문 조사하는 것처럼 체크하는 부분이 생깁니다.

 

  <input type="radio" name="yes" value="yes">yes

타입을 radio로 주게 되면 흔히 회원 가입할 때 나오는 동의 or 비동의에 대한 부분이 생깁니다.

checked를 하면 우선적으로 체크가 됩니다.

 

  <input type="file"><br>

타입을 file로 주면 사이트에 문의사항 같은 곳에서 사진 첨부하는 기능을 쓸 수 있습니다.

 

  <textarea rows="8" cols="80">문의내용을 입력하세요</textarea><br>

여기서는 input type이 아닌 textarea를 적어서 텍스트를 적는 박스를 만드는 기능입니다.

 

  <select onchange="if(this.value) window.open(this.value)">
        <optgroup label="html">
          <option value="http://www.naver.com/">html1</option>
          <option value="html4">html4</option>
          <option value="html5">html5</option>
        </optgroup>
        <optgroup label="css">
          <option value="css1" selected="selected">css1</option>
          <option value="css4">css4</option>
          <option value="css5">css5</option>
        </optgroup>
        <optgroup label="js">
          <option value="js1">js1</option>
          <option value="js2">js2</option>
          <option value="js3">js3</option>
        </optgroup>
        </select>

이 부분은 사진을 보시다시피 label을 선택하는 부분에 대한 코드입니다.

optgroup이라는 태그 안에 각각의 option의 태그들을 넣은 모양입니다.

 

select문의 뒤쪽에 if문을 적고 밑의 option에 이동하고 싶은 사이트 주소를 입력하면 html1이라는 보기를 onclick 하면 그 이동하고 싶은 사이트로 이동하게 되는 코드입니다.

 

이외에 여러 가지 폼 태그에 대해 간략하게 적어드리겠습니다.

 

우선 결과를 한번 보시죠

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>form2</title>
  </head>
  <body>
    <form>
      <input type="color"><br>
      <input type="time"><br>
      <input type="week"><br>
      <input type="month"><br>
      <input type="date"><br>
      <!-- <input type="datetime"><br> html:5초창기에 쓰이다가 폐기됨 -->
      <input type="datetime-local"><br>
      <input type="tel"><br>
      <input type="number"><br>
      <input type="range"><br>
      <input type="search"><br>
      <input type="email"><br>
      <input type="url"><br>
    </form>
  </body>
</html>

 

이런 폼 태그들이 존재한다 정도로만 아시면 될 것 같습니다.

 

여기까지가 제가 오늘 공부한 내용입니다.

'HTML' 카테고리의 다른 글

오디오, 비디오태그, 기타택스트관련태그, 특수기호에 대해 알아봅시다.  (0) 2019.09.19
폼(form)태그응용, (블락,인라인)요소, 이미지그룹화에 대해 알아봅시다.  (0) 2019.09.19
table태그 기초~응용까지  (0) 2019.09.17
하이퍼링크사용법 + 이미지태그에 대해 알아봅시다.  (0) 2019.09.12
여러가지 태그에 대해 알아봅시다.  (0) 2019.09.11
'HTML' Related Articles more