[2주차] 5. HTML의 양식 관련 태그들

두 번째 과제와 퀴즈! 저번만큼의 난이도로 예상하고 얕잡아 봤는데 어려웠다. 역시 매주 강의를 들으며 강의 내용을 요약한게 많은 도움이 됐다. 정리를 안했더라면 퀴즈 볼 때 머릿속이 까맣게 변했을 것이다. 아는 것 반 모른 거 반이지만 문제를 보고 판단할 정도의 능력은 갖출 수 있었다. 과제 또한 1주차 때보단 어려웠지만 들었던 강의 내용을 곰곰히 생각해보면서 하니까 얼추 완성은 할 수 있었다. 이론 상으로는 알고 있는데 코드로 적용시키는 것이 어려웠었던 것 같다. 앞으론 강의 정리한 것을 토대로 코드로 옮기는 연습을 더 많이 해야 겠다.

---

1. form 태그 : 여러 입력 양식들의 범위 지정하고, 범위 안에 들어있는 여러 양식의 정보를 특정 페이지를 전송하기 위해 사용 ex) 로그인페이지

• display: block 블록요소
• 중복(중첩) 사용 불가
• action 속성 : 사용자에게 입력 받은 정보를 전송할 주소 url, 해당 url에 form 정보를 전송 가능
• autocomplete 속성 : 사용자가 이전에 입력한 값이 있다면 자동완성기능 사용 여부(on. off), 기본값:on

- form 태그 범위 안에 있는 모든 데이터 양식에서 자동완성기능 사용 여부 정함

• method 속성: 서버 전송할 http 방식, POST(주소url에 노출x 하지만 의도적으로 하는 경우 노출 가능, 일반적으로 전송시 많이 사용, ), 기본값: GET(사용자가 입력한 정보가 주소부분에 그대로 노출, ex) 이메일과 비밀번호 그대로 주소에 노출)

- 아이디랑 비밀번호는 암호화해서 전송하는 경우가 많음

• name 속성: 필수적 입력하는 것은 아님, 다른 양식들과 구분하기 위한 양식 이름
• novalidate 속성: 서버로 데이터를 전송할 때 유효성 검사 데이터가 사용자에게 강요한 특정한 양식이 맞는지 검사)를 하지 않는 것, 특수한 경우나 테스트 할 때 많이 사용
• target 속성: 정보를 전송할 주소를 _self: 현재 탭에 띄울 것인지, _black : 새로운 탭에 띄울 것인 것인지 설정

---

2. input 태그 : 사용자에게 입력 받을 데이터 양식을 설정하는 태그

• 빈태그
• autocomplete 속성 : 사용자가 이전에 입력한 값이 있다면 자동완성기능 사용 여부(on. off), 기본값:on
• input 태그 하나에서만 자동완성 기능을 사용할 것인지 설정
• autofocus 속성 : 페이지가 오픈됐을 때 특정한 데이터 양식 부분에 포커스 기능이 생겨 바로 입력할 수 있게 됨, 중요한 것은 자동으로 포커스 시킬 수 있는 것은 하나 밖에 없기 때문에 고유하게 있어야 함
• checked : 양식이 선택되었음을 표시함, 글씨를 입력하는 양식에서는 의미 없음, 모든 input 에서 사용할 수 없고 type 값이 radio나 checkbox일 경우에만 사용 가능
• form 속성 : 기본적인 데이터 양식을 form 태그 안에다가 작성해야 하는데 form 태그 바깥에다가 작성해야 하는 특수한 경우도 존재할 수 있다. 그 경우에 form태그가 가지고 있는 id의 속성 값을 input의 form 속성에 연결시 form 태그 바깥에다 input 데이터 양식 사용해도 연결해서 쓸 수 있다.
• name : 사용자에게 입력받은 부분의 이름, 양식이 가지고 있는 이름, 서버로 데이터가 전송 될 때 이 양식이 어떤 이름을 가지고 있느냐에 따라서 이 데이터가 가지는 이름이 지정된다. 그래서 서버로 데이터 전송시 이 속성을 추가해서 이 데이터가 어떤 이름을 가지고 있는지 지정해줘야한다. 전송할 때 데이터의 이름 설정하기 위해 사용한다.

- 예제
<form action="/login" method="GET">
<input type="email" name="id">
<input type="password" name="pw">
<input type="submit" value="로그인">
</form>

구현

구현된 페이지의 주소

• maxlength 속성 : input type text에서 입력할 수 있는 최대 글자 수
• readonly 속성 : 사용자가 고칠 수 없게 하려면 추가(읽기 전용)
• disabled 속성 : 적을시 아예 포커스 조차 되지 않고 사용자에게 입력받는 데이터 방식을 아예 비활성화
• placeholder 속성 : 사용자에게 제공하는 일종의 힌트, 값 입력시 사라짐

<input type="number" placeholder="숫자를 입력하세요">

구현

• type 속성 : 사용자에게 입력받을 때 사용하는 태그, 여러가지 데이터 종류 중 어떤 종류의 데이터를 사용자에게 입력받을 것인가 설정

- button : 일반적인 버튼, button 태그처럼 사용, 특정한 기능이 없어서 js를 통해이버튼 클릭했을 때 어떤 기능
부여할 것인지 설정할 수 있다.
- checkbox: 사용자가 동의하는 것인지 아닌지 의견을 물어볼 때 사용, 많이 사용, 기본값:체크안된상태
- radio: checkbox와 유사하고 동그란 형태, 선택을 1개만 할 때, 어떤 값을 주어지고 무조건 1만 선택 할 때
사용 가능
-> 클릭시 해제 불가능->그래서 여러 개 존재 name 속성으로 같은 이름 통합
-> 기본적으로 선택되어 있는 상태 원할 시 선택되어 있고 싶은 radio에 checked 속성 추가
- email : 사용자에게 이메일 입력 받음
- file : 사용자가 가지고 있는 파일 입력 받음, 어떤 포맷의 파일 상관 없음, 하나의 파일만 받을 수 있으나
여러 개의 파일 입력 받고 싶을 시 multiple 속성 추가 시 가능
- password : 사용자가 가지고 있는 비밀 번호 입력 받음
- submit : 서버로 데이터를 전송하겠다는 전송 의사 입력받음
- text : 기본적인 텍스트 입력받음
- search : 검색할 수 있는 텍스트 요소 제공
- number: 숫자로만 입력받음, value 값으로 기본값 지정 가능,
-> 위아래 화살표로 숫자 증감 할 수있음, max= “숫자최대값”, min=”숫자최소값”,
step=”5”(5단위로 증가, 5-10-15…)
- reset : 초기화 버튼, 초기화가 포함되어져 있는 form 태그 안에 있는 양식만 초기화
- image : src 속성과 alt 속성 같이 사용,
-> 삽입한 이미지를 제출의 버튼으로 사용할 수 있음
<form action="/login">
<input type="image" src="./images/증사.jpg" alt="증사">
</form>

---

3. label 태그 : button, input 태그 등에 붙이는 일종의 제목 caption

• display : inline 인라인 요소
• label의 텍스트를 클릭해도 체크 할 수 있음
• label for=”지칭하려는 태그의 id값” 을 통해 이 label태그는 제공하는 일종의 label 요소의 제목이 해당하는 태그에 제공되는 것을 브라우저가 인식 할 수 있다.

<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>

• label for을 매번 치기에는 힘들기 때문에 지칭하려는 태그를 label로 감싸는 것도 방법이다. label 태그 안에 지칭하려는 태그와 태그의 label의 두개 내용이 같이 넣을 수 있는 상황이 아니라면 label for을 써야 함

<label><input type="checkbox" id="useragreement" />동의하십니까?</label>

• for : 참조할 라벨 가능 요소의 id 속성 값을 적음으로써 지칭하려는 태그와 연결해서 쓰는 것이다.

---

4. button 태그 : 선택 가능한 버튼 만듦

• input으로도 만들 수 있지만 좀 더 특화된 버튼을 만들 수 있다.

- 예제
<input type="reset" value="초기화">
<button type="reset">초기화</button>
->위에 두 코드는 동일한 기능을 가진다.

• autofocus 속성: 문서 내 고유해야 하며 페이지가 로드될 때 자동으로 포커스되야 함
• disabled 속성: 해당하는 버튼을 완전히 비활성화
• form 속성 : 버튼 요소가 form 태그 내부에 존재하지 않을 때 id를 연결해서 form 태그 내부에 있는 것 처럼 작동하게 할 수 있다.
• name 속성: 폼 데이터와 함께 전송되는 버튼의 이름 설정 가능
• onclick 속성 : 한번 클릭시 “ ”에 들어 있는 내용 실행
• type 속성

- button :일반적인 버튼
->기능을 포함하지 않아 거의 모든 경우에 js코드를 붙여준다. js 코드를 통해서 버튼이 어떤 기능을 할 것인가를
설정하고서 사용하게 된다.
<button onclick="doit()">클릭하세요!</button>

<!--doit이라는 함수 만들고 함수 실행시 화면에 알림창이 뜨면서 클릭했습니다! 메세지 출력-->
<script>

function doit() {
alert('클릭했습니다!');
}
</script>

- reset : 초기화를 용도를 한 버튼
- submit : 서버로 어떤 데이터를 전송(제출)하기 위한 버튼

---

5. textarea 태그 : 여러 줄의 일반 텍스트 양식 작성 시 사용(한 줄짜리 텍스트 양식은 input 태그사용)

• 대표적인 특징 : 태그 사용시 만들어진 영역을 확대 축소 할 수 있는 것이 영역의 오른쪽 하단에 위치, 확대 축소 하고 새로고침 하면 원래 상태로 돌아감
• placeholer 속성 : 사용자에게 입력할 양식 힌트 제공, 값 입력 시 사라짐
• rows 속성 : 이 여러 줄이 총 몇 줄의 양식을 가질 것인가, 줄의 수 정함, input 태그와 다른 점

---

6. progress 태그 : 쉽게 생각하면 게임의 로딩 바 생각하면 됨, 완성 진행율

• max 속성: 완료되었을 때의 값 명시
• value 속성: 현재 진행된 양 표시 , 대부분 js를 사용해서 하는 편, max 속성 작성 안 할시 value 속성 값은 0에서 1 사이의 값으로 설정 ex)0.1=10%
• 예제

<progress value="0" max="100"></progress>
<script>
<!--progress 형태 찾음-->
const progress = document.querySelector('progress');

<!--1초에 한번씩 progress의 value값을 10씩 더하고 100이 되면 더하는 것을 중지-->
const interval = setInterval(function () {
progress.value += 10;
if (progress.value >= 100) clearInterval(interval);
}, 1000)
</script>

---

[양식 그룹화 할 때 사용하는 태그]
1. fieldset 태그 : 같은 목적의 양식 그룹화

• disabled 속성 : fieldset태그를 가지고 그룹화한 부분의 모든 양식들을 비활성화
• form 속성 : fieldset 태그의 부분이 form 태그 범위 안에 없다면 이 태그를 통해 연결가능
• name 속성: fieldset 태그의 그룹 이름 지정시 사용

2. legend 태그 : 같은 목적의 양식 그룹화 한 것을 제목 지정

---

[옵션의 선택 메뉴나 자동완성 제공 select 나 datalist>optgroup>option]
1. option 태그 : 사용자에게 선택할 수 있는 옵션 제공

• select 태그 안에서 사용 될 각각의 옵션이나 datalist 태그 안에서 자동완성되는 부분에서 제공할 옵션 만들 때 사용
• 빈태그로도 사용 가능 <option/> 하지만 contents 가 삽입할 부분이 없기 때문에 label과 value를 필수적으로 적어줘야 함
• <option>contents</option> 형식으로 사용하는 것을 추천
• disabled 속성: 해당하는 옵션 비활성화
• selected 속성 : 사용자가 선택하기 전에 특정 부분이 선택되었음을 표시할 수 있고 그걸 값으로 사용 할 수 있다
• label 속성: 화면에 표시되는 텍스트
• value 속성: 서버로 보내질 특정한 값
• <option>과 </option> 사이에 들어가는 contents가 label과 value 역할을 할 수 있다.

2. optgroup 태그 : 옵션 그룹화

• 옵션을 통해서 여러가지 선택 목록을 제공할 때 그 선택 목록이 너무 많으면 혼란이 올 수 있으므로 수동으로 wrapping 해줌
• 전체적으로 제공되는 목록의 특정한 부분들을 그룹화 하여 제공 가능, 그 그룹화된 내용은 목록에 표시가 됨.
• label 속성 : 옵션 그룹의 이름
• disabled 속성 : 해당하는 목록 부분만 비활성화 가능

3. select 태그 : 제공된 옵션을 이 태그를 통해 선택 할 수 있음

• option 태그로 제공하는 옵션들 중 선택하는 메뉴 제공
• autocomplete 속성 : 이전 선택한 값이 있으면 이거 선택했었다하고 자동으로 완성
• disabled속성: 비활성화
• form 속성 : form 태그 외부에 있어도 연결 가능
• multiple 속성: 다중선택 가능하게 만들어줌 , 브라우저에서 shift와 ctrl 활용
• name 속성: 선택 메뉴 이름으로 설정해주는 게 좋음
• size 속성: 하나 보이는 옵션을 여러 개 보이게 해줌, 기본값:0(1과 같은 출력값)

4. datalist 태그: 제공된 옵션을 자동완성하는 기능으로서 제공 가능

• 자동완성기능을 제공하는 데 그 목록을 만드는 데 사용
• 그 목록을 input 태그의 미리 정의된 옵션으로 제공하게 됨

---

참고자료
https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리