[4] form 태그, meta 태그, fields 태그, legend 태그 알아보기

- 2021.08.24 -

- 2023.05.05 -

---

기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다

---

사진1

Form <form></form>

사용자에게 데이터를 입력 받기 위한 화면 구성을 지칭한다.

<form></form>태그 사이에 관련 태그들(input, label, button, select 등)을 넣어 하나의 폼을 완성할 수 있다.

- 폼의 시작과 끝을 정의하는 태그

 

사진1의 위와 아래처럼 form태그를 열어서 태그 안에서 div, label,input태그를 사용해서 데이터를 입력 하는데

form태그는 사용자의 데이터를 입력받을 수 있는 태그들을 위한 화면을 구성한다.

주요 속성 action 데이터를 전송할 url주소를 입력한다. 사진1을 보면 action="signup.html"이라는 항목이 있는데 폼에서 작성이 완료된것을 signup.html로 전송한다는 의미이다. *지난번에 배웠던 태그에서 <img src="">에 했던 것처럼 사진 소스의 절대경로를 입력했다면 폼태그에서도 이와 같은 역할을 하는 것. method 데이터 전송 방법을 정의한다. 주로 get방식과 post방식 중 하나를 사용한다. get방식은 입력한 데이터값이 주소줄에 표시가 되어 보안의시선으로 보았을때 좋은 것은아니다. GET방식의 method는 크로스사이트스크립팅(XSS)이라는 공격에 취약하여 GET보다는 POST를 더 권장한다. 역시 첫번째 줄을 보면 method="POST"라고 적혀 있는데 이는 action에서 정의한 데이터를 어떤 방법으로 전송할지를 정한다. 위 사진대로라면 action에서 정의한 url주소로 POST방식으로 데이터를 전달한다. enctype 데이터를 전송할 때 전송 인코딩 형식을 지정

Input, Select <input></input> <select></select>

<input type="text" , , , >

사용자 입력을 받는 입력상자를 만드는 태그이다.

type의 속성에 따라 입력칸, 선택박스, 버튼을 표현할 수 있다.

주요 속성 type 입력형태를 지정한다. text, password, button, submit, radio,checkbox 등으로 형태를 지정. [text] 위 네모박스에 자유롭게 글을 작성 할 수 있다. [password] 위 네모박스에 비밀번호를 입력할 수 있고 텍스트로 표현되는것이 아닌 *로 표현된다. [button] 위 버튼을 클릭할 수 있는 형태 input 태그의 button도 있고 button자체의 태그도 존재함. <input type="buton" value="누르세요"> <button>누르세요</button> 위처럼 두가지가 존재 [Submit] 데이터가 입력이 된 후 바로 페이지로 전송하는 태그 (action태그가 지정해놓은) 주로 회원가입완료, 로그인완료에 사용 [Radio] 한가지만 선택할 수 있는 문제를 만들때 사용한다. 예) 성별, 시험문제 등 [Checkbox] 체크박스를 누를 수 있다. 예) 계약서 동의, 약관 동의, 중복 답변 등 name 입력 값의 이름을 지정한다. Value 입력 상자의 값을 지정한다. 해당 값이 뜬 상태로 시작된다. <input type="buton" value="누르세요"> 에서 입력을 button으로 하고 그 button의 입력을 '누르세요'로 사용자에게 보여지는 이름을 씌우는것이다.

 

Select<select></select>

드롭 다운 선택 박스를 만들 수 있다.

select태그를 쓰고 그 안에 option태그를 넣어서 선택할 수 있다.

 

<select name="job" id="id-job">
  <option value="programing">프로그래밍</option>

</selcet>

 

라는 html코드를 작성 했을 때 결과는 아래와 같다.

프로그래밍

그리고 코드 줄에 value는 서버에 실제로 전달되는 값이 된다.

 

 

 

label <label></label>

입력상자의 제목을 붙이는 태그

사용자에게 각 입력 칸을 성명해주는 레이블을 표시한다.

입력태그(input)에 id속성으로 지정된 값을 for 속성으로 넣어주면 그 입력 태그를 수식한다.

<label for="username">가장 좋아하는 과일</label> <input type="text" name="fruit" id"fruit">

 

textarea <textarea></textarea>

두 줄 이상의 긴 글을 입력 받도록 해주는 입력 칸을 만듭니다.

textarea 내부가 컨텐츠가 되고 줄바꿈을 인식한다.

 

<input type="text" name="account" id="id-account">

input 은 데이터를 넣기 위한 태그

 

type="text" 은 input에 넣을 데이터의 type을 결정함 text는 입력할 데이터의 종류중 하나

 

name="account" 은 서버가 보기위한 이름표. 전송되는 data 수식을 의미하며 사용자에게는 보이지 않음.

 

 

 

fieldset <fieldset></fieldset>

여러 입력 태그를 하나의 그룹으로 묶을 수 있다.

fieldset

위 fieldset의 이름은 프로필로 지정하였고 이 태그 안에 작성한 폼과 라디오태그들이 모두 fieldset에 묶여있는것을 확인 할 수 있다.

 

legend <legendt></legend>

fieldset에서 씌워진 그룹(틀)의 이름을 지정할 수 있다.

fieldset으로 큰 틀을 묶고 그 안에 label, input태그를 이용하여 내용을 채웠다.

그리고 legend 태그를 이용해서 내가 적은 정보들의 큰 제목을 지정할 수 있다.

그러면 아래 사진과 같이 바뀐다.

만약 lenged 태그를 쓰지 않고 그대로 fieldset태그를 쓴다면 아래 사진과 같이 변경된다.

legend 태그를 쓰지않았을때

 

 

---

마  치  며

정보보안을 공부하며 배웠던 지식들을 여기 html에서 배우는게 신기했다.