HighLight in your life~

웹 개발시 사용하는 HTML 기본 태그를 정리해보았습니다.

1. 텍스트 관련 태그

2. 목록 관련 태그

3. 표 관련 태그

4. 멀티미디어 관련 태그

5. <form> 태그의 속성 : <form [속성=“속성값”]>여러 폼 요소</form>

6. <input> 태그의 type속성

7. 텍스트와 비밀번호를 나타내는 type=“text”와 type=“password”

<input type=“text”>

<input type=“password”>

7. 체크 박스와 라디오 버튼을 나타내는 type=“checkbox”와 type=“radio”

<input type=“checkbox”>

<input type=“radio”>

<체크 박스, 라디오 버튼에서 사용하는 속성>

8. 숫자 입력 필드를 나타내는 type=“number”와 type=“range”

<input type=“number”>

<input type=“range”>

9. 전송, 리셋 버튼을 나타내는 type=“submit”와 type=“reset”

<input type=“submit | reset” value=“버튼에 표시할 내용”>

*전송 버튼을 나타내는 submit은 폼에 입력한 정보를 서버로 전송합니다. submit 버튼으로 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨집니다.

*반면에 reset버튼은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다.

10. 기본 버튼을 나타내는 type=“button”

type=“button”은 submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 형태만 삽입합니다. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다. 다음과 같이 value속성을 사용해 버튼에 표시할 내용을 지정합니다.

<input type=“button” value=“버튼에 표시할 내용”>

11. 파일을 첨부할 대 사용하는 type=“file”

type=“file”로 지정하면 폼에 파일을 첨부할 수 있습니다. 다만, 첨부한 파일을 서버로 보내려면 자바스크립트 등 웹프로그래밍 언어를 사용해야 합니다. 실제 첨부 버튼에 표시되는 내용은 웹 브라우저마다 조금씩 다릅니다.

<input type=“file”>

12. 히든 필드 만들 때 사용하는 type=“hidden”

화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소. 사용자에게 굳이 보여 줄 필요 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력.

웹 브라우저에는 히든 필드가 보이지 않으므로 사용자는 그 정보를 알 수 없다. 그러나 ‘로그인’ 버튼을 클릭하면 입력한 정보화 함께 히든 필드의 내용이 서버로 함께 전송 가능.

<input type=“hidden” name=“이름” value=“서버로 넘길 값”>

13. input 태그의 주요 속성

- HTML5에 와서 폼 태그는 더욱 강력해졌다. 입력란에 커서나 힌트를 표시할 수도 있고, 꼭 입력해야 하는 필드도 지정할 수 있다.(예전에는 자바스크립트로 실행한 것을 <input> 태그의 속성만으로도 처리할 수 있다.

1) 자동으로 입력 커서를 갖다 놓는 autofocus 속성

      <label for ="user-name">이름 </label >

      <input type ="text"id ="user-name"autofocus required >

2) 힌트를 표시해 주는 placeholder 속성

      <label for ="phone">연락처 </label >

      <input type ="tel"id ="phone"placeholder ="하이픈 빼고 입력해 주세요.(01012345678)"required >

3) 읽기 전용 필드를 만들어 주는 readonly 속성

- readonly 속성은 readonly, readonly=“readonly”, readonly=“true” 로 지정

<input type=“텍스트 입력 필드” readonly>

      <label for ="prod">주문 상품 </label >

      <input type ="text"id ="prod"value ="상품용 3KG"readonly >

4) 필수 입력 필드를 지정하는 require 속성

- required=“required”, required 로 지정

      <label for ="addr">배송 주소 </label >

      <input type ="text"id ="addr"required >

14. 여러 줄을 입력하는 텍스트 영역 <textarea> 태그

- <textarea> 태그는 게시판에서 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.

<textarea>내용</textarea>

<textarea> 태그의 속성

       <label for ="memo">메모 </label >

       <textarea id ="memo"cols ="40"rows ="4"></textarea >

15. 드롭다운 목록을 만들어 주는 <select>, <option> 태그

<select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 원하는 항목을 추가한다. <option> 태그에는 value속성을 이용해 서버로 넘겨주는 값을 지정한다.

<select>

<option value=“값1”>내용1</option>

<option value=“값2”>내용2</option>

.....

</select>

<select>태그의 속성

<option>태그의 속성

16. 버튼을 만들어 주는 <button> 태그

10번과 비슷하게 보이지만 다릅니다. <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다. <button> 태그의 type속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정한다. submit, reset, button 중에서 선택할 수 있고, 만약 지정하지 않으면 submit을 선택한 것으로 간주된다. <button>태그에는 콘텐츠를 포함할 수 있어서 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수도 있다.

<button type=“submit”>내용</button>

<button type=“reset”>내용</button>

<button type=“button”>내용</button>

<button>태그의 type 속성

17. 폼에서 사용하는 태그

18. <input> 태그의 유형(type)

19. <input> 태그의 속성