form 태그 – 회원가입 페이지 만들기

 

홈페이지 만들기에서 빠질 수 없는 회원가입 페이지처럼 사용자에게 정보 작성을 요구하는 페이지에 사용되는
form 태그에 대해서 알아보려고 한다.

 

<form>는 누군가에게 정보를 보내는 기능을 사용할때 쓰여진다.

<form>에 사용되는 자식태그

• <fieldset> = 폼의 영역을 나눠주는 태그
• <legend> = 나눠진 영역의 큰 제목
• <span> = 맥락상 지정하기 어려운 글을 적을때 사용한다.
• <label> = form의 라벨, 제목 처럼 붙는다.
  -for = 제목을 클릭해도 <input>을 활성화 하여 웹의 접근성을 높힌다.
  -<input>에 id를 만들어 고유id를 정해주고 <label>의 form에 지정하고 싶은 <input>의 id를 적어준다.
  – <input> = 유저들이 참여하는 컨텐츠를 만들때 붙히는 태그
  -type = 작성방법, input의 타입을 정하는 속성태그

• *file = 유저가 파일을 등록할 수 있도록 만들어 주는 속성설명태그
• *text = 유저가 글자를 입력할 수있도록 만들어 주는 속성설명태그
• *image = 등록한 이미지를 유저가 사용할 수 있도록 하는 속성설명태그
• *radio = 하나의 선택지만 선택할 수 있도록 만들때 사용하는 체크박스 속성설명태그 + name속성태그와 같이사용하고
  name이 같은 <inpot>끼리 묶여서 radio가 활성화 된다.

• *checkbox = 체크박스를 만든다, 자유롭게 체크를 활성화하고 비활성화 할 수 있다.
• *submit = 버튼을 만든다. value를 붙혀 <inpot>의 이름을 정하여 버튼의 이름은 지정해 준다.
• *reset = 작성하던 정보가 리셋되는 버튼을 만든다.
• *number = 숫자만 적어넣을 수 있는 입력창 생성, 위아래 화살표모양이 활성화 되고, 위아래로 클릭 시 숫자변형
  -value = <input>의 이름을 정해준다.
  -placeholder = 작성란에 예시를 적을 수 있게 해주는 속성태그 유저가 텍스트를 쓰는 순간 사라진다.

• <textarea>  =  유저들이 텍스트를 길게 적을때 사용하며, 작성하는 곳에 글을 미리 적어넣을 수 있다.
  -rows , cols 를 각각 사용하여 크기를 정한다.

• <select> = 유저들이 선택하는 폼을 만들때 사용한다. ex) 주소를 적는 란에 직접작성, 네이버, 다음 등으로 선택할 수 있도록 만들어 둔 폼
• <option> = <select>안에 자식태그로 들어가는 태그로, 선택 항목을 만든다.
• <button> = 버튼을 만드는 태그 <input>의 submit 과 같은 역할을 한다.

from 태그 예시

 

 

예시 코드의 html파일을 열어보면 보기와 같이 만들어진다.