[HTML] 기초 공부 3

2025.1.1 새해가 밝아도 공부는 계속 된다

---

폼(Form)

 - 사용자에게 데이터를 입력 받기 위한 화면 구성을 폼이라고 한다. <form></form> 사이에 폼 관련 태그들 (input, label, button, select 등)을 넣어 하나의 폼을 구성하게 된다.

• form : 폼의 시작과 끝을 정의하는 태그
• input, select : 사용자 입력을 받는 입력상자나 버튼을 만드는 태그
• label : 입력사자마다 제목을 붙이는 태그
• button : 버튼을 만드는 태그

폼의 예시에서 체크하는 부분이 있는데 Checkbox와 Radio 형식이 있다.

CheckBox는 여러개 선택이 가능하고 Radio는 한개만 선택이 가능하다.

적절한 형태로 쓰면 될 것 같다.

Check Box

Radio

 

---

form 태그

 - 폼을 정의하는 태그이다. 이 태그 내에 input, select, button 등의 입력 태그들을 넣어 사용자의 입력을 받아서 원하는 서버의 주소로 데이터를 전송할 수 있다.

 

주요 속성

• action : 데이터를 전송할 url 주소입니다.
• method : 데이터를 전송할 방법입니다. 주로 GET과 POST의 방식 중 하나를 사용합니다.
• enctype : 데이터를 전송할 때 전송 인코딩 형식을 지정합니다.

action은 매우 중요한 속성인데 왜냐하면, action을 사용해야 전송할 서버를 정확히 지정해 줄 수 있기 때문이다. 제대로 전송해야 오류도 없고 개인정보 같은 것을 다른 곳으로 보내면 안 되기 때문이다. 

GET은 보통 페이지에 어떤 데이터를 직접적으로 가져오거나 아니면 이 url을 그대로 공유해서 사용해야 되거나 아니면 노출이 돼도 상관이 없는 이런 케이스에 사용한다.

반대로 POST는 노출이 되어선 안되거나 데이터 양이 많거나 공유하면 안 되는 케이스에 사용한다.

form 경우에도 서버에 전송하는 방식이기에 GET과 POST를 적절히 활용해야 한다.

---

input 태그

 - 입력상자를 만드는 태그이다. type의 속성에 따라 입력칸, 선택박스(라디오 버튼, 체크 박스), 버튼을 표시할 수 있다. 홀 태그 형식으로 사용한다.

 

주요 속성

• type : 입력 형태를 지정합니다. text, password, button, submit, radio, checkbox 등이 있습니다.
• name : 입력 값의 이름을 지정합니다.
• value : 입력 상자의 값을 지정할 수 있습니다.

ex) <input type="button" value="완료"/>

      <button> 완료 </button> 

 

text와 password를 통해 입력칸이 형성되고 입력이 가능한데 password로 지정하면 입력 내용이 마스킹되어 화면에 노출되지 않는다.

submit으로 지정된 버튼을 클릭하면 해당 폼의 전체 내용이 form 태그의 action에 지정된 서버 주소로 전송된다. 여기서 value 속성은 버튼의 텍스트를 지정하는 역할을 한다.

---

select 태그

드롭다운 선택 박스를 만든다. option 태그를 사용해서 선택지를 추가한다.

<select name="job" id="job">
	<option value="programming">프로그래밍</option>
	<option value="design">디자인</option>
	<option value="business">사업기획</option>
	<option value="marketing">마케팅</option>
</select>

 

리스트 태그와 비슷하고 버튼을 누르면 내가 넣어놓은 내용이 나온다. 버튼을 형성해 내용이 처리되고 value에 해당하는 값이 서버로 전송되는 형태이다.

---

textarea 태그

두 줄 이상의 긴 글을 입력 받도록 해주는 입력 칸을 만든다. 쌍 태그로 만들어지고 태그 사이에 값을 미리 넣을 수 있다.

<textarea>안녕하세요. 
값을 미리 입력합니다.</textarea>

 

HTML 다른 곳에서는 줄바꿈을 따로 처리하지 않는 이상 저장되지 않는다고 했는데 textarea는 태그 안에서 줄바꿈을 해도 실제로 인식이 된다.

---

label 태그

사용자에게 각 입력 칸을 설명해주는 레이블을 표시할 수 있다. 입력 태그에 id 속서응로 지정된 값을 for 속성으로 넣어주면 그 입력 태그를 수식해주게 된다.

<label for = "username">이름</label>
<input type="text" id="username"/>

 

라디오버튼에도 이름을 붙일 수 있는데, 예시코드는 다음과 같다.

<input type="radio" name="fruit" id="fruit-apple"/>
<label for="fruit-apple">사과</label>

 

이렇게 하면 라디오 버튼 옆에 이름도 같이 나오며 서버에 어떤 내용인지도 전달할 수 있다.

 

• label은 화면 폼 요소
• 수식은 사용자 눈에 보이는 것
• name은 사용자 눈에는 안 보이지만 서버가 보기위한 이름표이다. 전송되는 data 수식이다.

---

fieldset, legend 태그

여러 입력 태그를 하나의 그룹으로 묶고 원하는 제목을 달 수 있다.

<fieldset>
	<legend> 가장 좋아하는과일은? </legend>
    ...
</fieldset>