(HTML) 기본 태그3

폼 태그

• 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
• 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용

<form action='서버에게 전달할 파일 위치' method='전송방법'>
	form 태그 안에 form 료소를 통해 데이터를 서버로 전달
</form>

✅ 전송방법

• get: url에 데이터를 포함하여 전달
• post: body에 데이터를 포함하여 전달

<input> 태그: 입력 상자

type 속성

• text: 문자를 입력받는 글상자
• password: 비밀번호를 입력받는 글상자
• radio: 여러개의 옵셩 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼
• ✅ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함
• checkbox: 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼
• ✅ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함
• file: 원하는 파일을 서버로 전송하기 위한 글상자
• button: 이벤트가 없는 일반버튼
• reset: 입력받은 데이터를 초기화 하는 버튼
• submit: 입력받은 데이터를 서버에 보내주는 버튼
• hidden: 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자
• email: 이메일을 입력받는 글상자(@ 필요)
• url: 웹사이트를 입력받는 글상자(http 필요)
• tel: 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)
• date: 원하는 날짜를 입력받는 글상자
• number: 원하는 숫자를 입력받는 글상자

<input type="number" min="최소값" max="최대값" step="증가값">

• color: 원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB컬러값으로 서버에 전달)
• search: 검색어를 입력받는 글상자
• range: 일정 범위안에 값만을 입력하는 조절바

<input type="range" min="최소값" max="최대값" value="현재값">

 

속성

• name: 요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용
• id: 요소의 유일한 이름을 설정. HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용
• HTML 문서내에서 다른 요소와 같은 id를 가질 수 없음)
• maxlength: 값의 최대길이를 설정
• placeholder: 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
• value: 서버로 전달할 입력양식의 값을 설정
• checked: 라디오 또는 체크박스 중에서 미리 선택하는 값을 설정
• readonly: 데이터를 볼 수 있으나 수정할 수 없게 설정(서버로 데이터가 전달됨)
• disabled: 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달되지 않음)
• required: 데이트를 submit 할 때 데이터를 필수로 입력하도록 강제하는 설정

라벨 태그

• 폼 양식에 이름을 붙이는 요소
• 다른 요소를 연결하면 해당 영역이 넓어짐
• radio, checkbox의 스타일을 설정시 많이 사용됨

<label for='요소의 id'>텍스트 또는 이미지</label>

버튼 태그

• 버튼을 생성하는 요소
• type="reset", type="button", type="submit"

<button>버튼클릭</button>

선택 상자

• 여러개의 옵션을 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 선택

<select>
	<option value="apple">김사과</option>
	<option value="banana">반하나</option>
	<option value="orange">오렌지</option>
</select>

여러줄 글상자

• 여러줄의 텍스트를 입력받는 글상자

<textarea cols="가로 글자수" rows="세로 줄수">value</textarea>

 

실습

<input type="hidden" name="hidden" value="서버로 전달될 값">

hidden 타입은 사용자 눈에는 보이지 않지만 실제로는 존재하는 값이다.

<p>아이디:
<input type="text" name="userid" id="userid" maxlength="20"
placeholder="아이디를 입력하세요" required>
</p>

일반 텍스트를 입력받을 수 있으며 최초상태는 placeholder의 값으로 출력해준다.
required로 인해 입력을 하지않으면 경고창이 나오며
maxlength로 인해 20문자를 넘을 수 없다.

<p>
비밀번호: <input type="password" name="userpw" id="userpw" maxlength="20"
placeholder="비밀번호를 입력하세요" required>
</p>

password 타입은 입력값을 눈으로 볼 수 없도록 막아준다. 나머지 속성은 위와 동일하다.

<p>
	성별: 
	<label for="male">남자</label>
	<input type="radio" id="male" name="gender" value="남자" checked>
	<label for="female">여자</label>
	<input type="radio" id="female" name="gender" value="여자">
</p>

radio 타입은 클릭박스를 생성해주며 같은 name값을 가진 radio끼리 중복 선택을 막아준다. 값을 전달할 때는 value값을 전달한다. label에서 for에 다른 태그의 id를 입력하면 label을 클릭시 함께 클릭된것 처럼 동작시켜준다.

<p>
    취미: 
    운동<input type="checkbox" name="hobby" value="운동">
    음악감상<input type="checkbox" name="hobby" value="음악감상">
    영화감상<input type="checkbox" name="hobby" value="영화감상">
    게임<input type="checkbox" name="hobby" value="게임">
    등산<input type="checkbox" name="hobby" value="등산">
</p>

checkbox는 radio와 같이 체크박스를 생성해주지만 중복선택이 가능하다는 차이점이 있다. 값전달은 화면에 보이는 값이 아닌 value의 값을 전달해준다.

<p>
    나이: <input type="text" name="age" value="-1" readonly>
</p>

text타입에 value를 설정시 화면에서 미리 값이 담겨 있으며 readonly속성은 값을 수정할 수 없도록 막아둔다.

<p>
	주민등록번호: <input type="text" name="ssn" disabled>
</p>

disabled 속성은 값을 수정할 수 없으며 readonly와 다르게 값을 전달할 수 없다.

<p>
	첨부파일: <input type="file" name="file">
</p>

file타입은 실제 파일을 전달해줄 수 있다.

<p>
    직업: 
    <select name="job">
        <option value="프로그래머">프로그래머</option>
        <option value="공무원">공무원</option>
        <option value="전문직">전문직</option>
        <option value="학생">학생</option>
        <option value="취준생">취준생</option>
    </select>
</p>

select태그는 안에 option태그를 이용하며 사용자에게 보여지는 값이 아닌 value값을 전달해준다.

<p>자기소개</p>
        <p><textarea name="content" cols="50" rows="5"></textarea></p>

textarea태그는 엔터키 포함 긴문자열을 담을 수 있으며 cols와 rows로 크기를 설정할 수 있다.

<p>
    이메일: <input type="email">
</p>
<p>
    웹사이트: <input type="url">
</p>

email타입은 email형식을 안주면 경고창이 나오며 url타입도 url형식을 안주면 경고창이 나온다.

<p>
	전화번호: <input type="tel">
</p>

tel타입은 모바일에서 클릭시 숫자패드로 입력하게 되어있다.

<p>
	생년월일: <input type="date">
</p>

date타입은 클릭시 달력으로 클릭하여 값을 입력받을 수 있다.

<p>
	좋아하는 숫자: <input type="number" min="1" max="10" step="1">
</p>

number타입은 숫자만 입력을 할 수 있으며 옆에 화살표 모양으로 숫자를 증가 감소 시킬 수 있다.
min속성과 max속성은 각각 최솟값 최대값을 설정해주며 step속성은 버튼클릭시 증가 감소하는 수치를 설정한다.

<p>
	좋아하는 색상: <input type="color">
</p>

color타입은 색깔의 rgb값을 전달해주며 클릭시 원하는 색깔을 선택하거나 입력할 수 있다.

<p>
	검색어: <input type="search">
</p>

search타입은 값을 입력시 오른쪽에 삭제버튼이 활성화 된다.

<p>
	프로그래밍 능력: <input type="range" min="1" max="5" value="3">
</p>

range타입은 숫자 값을 위와같이 표현해준다.
min속성과 max속성은 각각 최솟값과 최대값을 설정해주며 value로 먼저 값을 입력받을 수 있다.

<p>
    <input type="button" value="클릭하세요">
    <input type="reset" value="다시입력">
    <input type="submit" value="회원가입">
    <button type="button">버튼클릭</button>
</p>

button속성, reset속성, submit속성 그리고 button태그는 모두 버튼을 생성해준다.
button태그를 제외한 3가지는 전부 value속성에 값이 전달하는 값이 아닌 버튼에 보여주는 텍스트이다.
button태그는 태그 사이에 보여줄 텍스트를 입력하며 타입종류로는 button,reset,submit이 있으며 기본값으로 submit속성을 가지고있다.
button은 자바스크립트로 설정을 안할시 아무 기능이없다.
reset은 폼태그 안에있는 모든 값들을 초기화 시킨다.
submit은 폼태그를 실행시킨다.

 

HTML의 디스플레이

1. inline

• content 크기 만큼만 자리를 차지하는 요소
• 텍스트, img, span ...
• 텍스트의 특징을 가지고 있음

2. block

• 라인을 모두 차지하는 요소
• p, h, ul, li, div ...
• 면의 특징을 가지고 있음

 

span 태그

• 줄 단위로 영역이 설정
• inline 특징을 가지고 있음

div 태그

• 면 단위로 영역이 설정
• block 특징을 가지고 있음

 

시맨틱 태그(Semantic)

• Semantic: 의미론적인
• 의미가 있는 태그를 사용

시맨틱 태그의 장점

• 검색엔진 최적화
• 스크린 리더를 사용하여 페이지를 탐색할 때 도움
• div>div>div>div>div>... 끝없는 div를 탐색하는 것보다 효율적
• 개발자에게 명확한 의미를 전달

<header></header>

• 페이지의 제목과 같은 소개 내용을 포함
• heading 태그나 로고, 검색양식, 작성자 이름등을 포함

<nav></nav>

• 메뉴, 목차등에 사용

<main></main>

• 지배적인 컨텐츠 영역을 나타내는 태그

<section></section>

• 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
• 섹션에는 항상 제목이 있는 것이 일반적

<article></article>

• 자체로 의미가 있는 웹페이지 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서
• 게시물, 잡지, 블로그 또는 신문기사

<footer></footer>

• 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크 카피라이트 등을 포함

<aside></aside>

• 간접적으로 문서와 관련된 내용
• 사이드바