'Select Tag'에 해당되는 글 1건

  1. 2018.03.15 HTML 셀렉트 태그 코딩 (Select Tag)
카테고리 없음2018. 3. 15. 23:17

HTML 셀렉트 태그(Select Tag)는 웹에서 많이 사용되는 원하는 항목을 사용자가 간단하게 선택할 수 있는 입력폼을 제공하여 입력된 값을 전달받아 서버로 보내는 태그입니다. 콤보박스라고도 하며, 드롭다운 목록 메뉴를 만들 때 사용됩니다.

 

<select>내용</select> 태그는 드롭다운 박스를 만드는 태그와 드롭다운 내부에서 하나씩 선택항목을 고를 수 있는 <option>내용</option> 태그로 구성되어 있습니다

 

1. HTML SELECT TAG(셀렉트 태그)

 

01) 폼의 관련요소들을 그룹화하는 <fieldset>~</fieldset> 을 <body>내용</body>태그안에  정의합니다.

 

 

02) <legend>내용</legend> 태그는 fieldset 태그에 대한 머리말로 사용되는 태그로 여기서는 "내가 좋아하는 것은?으로 정의합니다

 

 

03) 스포츠 선택을 레벨화 합니다

 

 

04) <select>내용</select> 태그를 정의합니다 

 

 

05) 그룹화할 스포츠종목으로 축구, 야구, 농구, 골프, 기타로 지정하며, 좋아하는 스포츠를 선택할 수 있게 <option>~</option> 태그와 value 속성값을 입력합니다

 

 

06) inputtype 속성으로 입력된 데이터를 서버로 전송하라는 submit로 하여, 속성값을 전송으로 합니다.

 

 

07) HTML SELECT TAG 코딩이 완료되었으면, 단축키인 Ctrl+S를 누른 후 저장하면 됩니다.

 

2.  웹브라우저에서 보이는 HTML SELECT TAG

 

HTML에서 작성한 대로 웹상에 보이게 하기 위하여 Ctrl+ F1키를 눌러 해당 HTML을 불러옵니다. 여기서는 구글의 크롬 브라우저을 연결하였습니다. 텍스트링크걸기의 네이버로 바로가기를 클릭하거나 이미지 링크걸기의 이미지를 클릭하게 되면 지정된 네이버 화면으로 이동이 됩니다

 

Posted by csgstar