HTML 폼 관련 태그(input , select , textarea)

오늘은 HTML from 태그에 대해서 알아보도록 하겠습니다.

form 태그는 기본적으로 사용하는 태그이며, 사용자가 입력할 수 있도록 하는 기능을 제공합니다.

form 태그는 <form> </form> 사이에 여러 종류의 태그들이 올 수 있습니다.

폼태그에는 사용자 입력을 위해서 사용되는 태그 및 폼의 속성을 지정하는 태그도 있습니다.

1 input 태그

  - input 태그는 name, type , value, checked , size , maxlength 속성을 가집니다.

  - type > 입력 형태를 기술하며, 다음과 같은 값들을 사용할 수 있습니다.

      type="button" > 버튼

      type="text" > 텍스트박스

      type="password" > 아스타처리되는 텍스트박스

      type="checkbox" > 체크 박스

      type="radio" > 라디오 박스

      type="submit" > 웹 서버로 전송

      type="reset" > 초기값으로 변경

      type="hidden" > 화면에 안 보이는 input박스

      type="image" > 이미지 박스

      type="file" > 파일 업로드 상자

    

  > name : 현재 input 태그의 이름 지정

  > value : input 태그의 값 지정 

  > checked :  체크 박스나 라디오인 경우 디폴트로 선택됨을 지정합니다. 기본은 선택되지 않습니다.

  > size : 텍스트박스나 패스워드텍스트박스의 보일 문자 수를 지정

  > maxlength : 입력할수 있는 문자의 최대 수를 지정

  > readonly : 읽기 전용으로 지정 ( 텍스트 박스 및 페스워드 박스)

  > src : 이미지인 경우에 이미지 파일의 위치를 지정

  > onfocus : 마우스이 포커스를 받았을 때 실행 할 자바 스크립트 함수를 지정

  > onblur : 마우스의 포커스를 잃었을 때 실행 할 자바 스크립트 함수를 지정

  > onselect : 텍스트 박스의 내용을 마우스로 선택한 경우에 실행할 자바 스크립트 함수 지정

  

<소스>

<결과>

2 select 태그

  - select 태그는 드롭다운 형태의 메뉴에서 하나 혹은 여러 개의 아이템을 선택할때 사용됩니다.

  - select 태그는 name , size , multiple 속성을 가집니다.

    > name : 현재 select 태그의 이름입니다.

    > size : 한 번에 보일 태크 아이템의 수를 의미합니다.

    > multiple : 한번에 여러 개를 선택할 수 있는지 여부 입니다.

    > onfocus : 마우스의 포커를 받았을 때 실행할 자바 스크립트를 지정합니다.

    > onblur : 마우스의 포커스를 잃었을 때 실행할 자바 스크립트를 지정합니다.

    > onchange : 마우스의 포커스를 잃고, 내용이 변경된 경우에 실행할 자바 스크립트를 지정합니다.

<소스 및 결과>

3 textarea 태그

   - textarea 여러 줄에 걸쳐 글을 입력할 때 사용됩니다.

   - textarea는 name, rows , cols 속성을 가집니다.

     > name : textarea 태그의 이름입니다.

     > rows : 새로 축으로 화면에 보일 라인 수를 의미합니다.

     > cols : 가로 축으로 화면에 보일 문자의 수를 의미합니다.

     > readonly : 읽기 전용으로 만드는 옵션 입니다.

     > onfocus : 마우스의 포커스를 받았을 때 실행할 자바 스크립트 함수를 지정합니다.

     > onblur : 마우스의 포커스를 잃었을 때 실행할 자바 스크립트 함수를 지정합니다.

     > onselect : 텍스트 내용을 마우스로 선택한 경우에 실행할 자바 스크립트 함수를 지정합니다.

<소스 및 결과>

자주 사용하는 폼태그 3가지에 대해서 알아보았습니다. 

다음에는 다른 태그에 대해서 알아보도록 하겠습니다.