[HTML] Form tag / input tag 모음집

Form Tag

 - 웹서비스를 이용하려면 회원가입을 한 후, 로그인을 해야한다.

  회원가입을 하려면 이메일  주소, 아이디, 비밀번호가 필요하다.

  이러한 정보를 적을때 사용하는 tag가 form tag이다.

 

  - 위의 정보는 서버 사이드 프로그램을 통해 DB에 저장된다.

 

Form Tag 사용방법

<form name = "폼 태그 이름" method = "데이터 전송 방식" action = "정보를 보낼 주소"></form>

1. name : 폼 태그의 이름

2. method : 작성한 정보들을 어떠한 방식으로 보낼 것인지 (Get, Post)

3. action : 정보를 어디로 보낼것인지 

 

 

---

 

input tag

  - input tag는 type의 값에 따라 많은 기능을 제공한다.

 

<input type = "타입" name= "입력 폼의 이름" maxlength = "최대 입력 가능 글자 수"></input>

1. type : 속성값에 따라 ID 입력폼, 비밀번호 입력 폼등이 될 수 있다.

2. name : 입력폼의 이름, 서버 사이드 언어에서 name값으로 전달된 정보들을 구분

3. maxlength : 입력 폼이 몇글자 까지 입력 가능하도록 설정할것인지 표시

 

 

 

Type 종류

text	<input type = "text" name= "userID" maxlength = "12"/>
password	<input type = "password" name= "userPw" maxlength = "12"/>
checkbox	음악감상 <input type = "checkbox" name= "myHobby" value= "music" checked/> 영화감상 <input type = "checkbox" name= "myHobby" value= "movie"/>
radio	음악감상 <input type = "radio" name= "myHobby" value= "music"/> 영화감상 <input type = "radio" name= "myHobby" value= "movie"/>
button	<input type = "button" value = "얌 버튼 클릭쫌 해바방"/>
file (파일업로드)	<input type = "file" name = "attachedFile"/>
search	검색 <input type = "search" name= "search" />

 

 

reset 

   - 같은 폼 내에 있는 입력한 정보들이 모두 초기화 된다. 

reset

<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소">      아이디 <input type = "text" name= "userID"/>      <input type = "reset" value= "다시입력" /> </form>

 

 

submit

   -  입력한 여러 값들을 action 속성에 입력된 페이지로 전송한다. 

submit

<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소">      아이디 <input type = "text" name= "userID" value= "myid"/>      <input type = "submit" value= "완료" /> </form>

 

 

 

email

   -  HTML5에 새로 생긴 기능이다

   - 이메일 주소의 규칙인 @(at)과 도메인이 있어야한다.

   - 유효성에 어긋나면 submit버튼을 눌러도 제출되지 않는다.

 

email

<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소">      email : <input type = "email" name= "email" value= "myEmail"/>      <input type = "submit" value= "완료" /> </form>

 

url

   -  HTML5에 새로 생긴 기능이다

   -  url 형태를 갖추지 않으면 유효성에 어긋나 submit버튼을 눌러도 제출되지 않는다.

 

url	<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소">      <input type = "url"/>      <input type = "submit" value= "submit/> </form>

 

 

number

   -  HTML5에 새로 생긴 기능이다

   -  숫자를 입력하는 폼

   -  문자를 입력해도 입력되지 않는다.

   - 스마트폰에서 입력폼을 이용할 경우 키보드의 숫자 키패드가 나오게 하려면 [pattern="\d*"]를 함께 사용해야한다

 

number

<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소">      <input type = "number" pattern = "\d*"/>      <input type = "submit" value= "submit/> </form>

 

 

color

   -  HTML5에 새로 생긴 기능이다

   - 색을 선택하는 기능

 

color

<form name = "폼 태그 이름" method = "post" action = "정보를 보낼 주소">      <input type = "color" /> </form>

 

 

 

range

   -  HTML5에 새로 생긴 기능이다

   - 색을 선택하는 기능

 

range

<input type = "range" min = "0" max = "100" value = "50" step = "10" />

 

placeholder

   -  input tag와 함께 사용할 수 있다.

   - 입력 창에 어떠한 내용을 입력해야 하는지 알려주는 기능

   - 실제 필요한 내용 입력시 자동으로 사라짐.

 

range

<input type = "text" placeholder = "아이디 입력" />

 

label

   -  label tag는 input tag와 짝을 이루어 사용

   - 라디오 박스가 무엇을 의미하는지는 사용자가 볼 수 있는 명칭을 부여 할때 사용

   - id 속성의 값은 한번만 사용해야한다.

   - label 태그에서는 for라는 속성을 사용한다.

   - label 태그에서 사용한 for 속성의 값과 input tag 의 id 속성값이 일치하여야한다.

 

label

<label  for = "input tab의 id 속성값"> 명칭 </ label>   <input type = "radio" name = "gd" value = "w" id = "이 페이지에서 사용할 고유한 이름"   />

 

 

select

   -  주로 회원가입 시 생년월일을 입력할 때 사용한다.

   - 여러개의 값을 표시하려면 value가 담긴 option 태그를 사용해야 한다.

  - select를 부모 태그로 하여 자식 태그로 option을 사용하는 구조

  - option 태그를 선택하면 해당하는 옵션 태그가 가지는 값이 있어야 하므로 value값으로 표시

 

select

<select name = "birthMonth">        <option value = "1"> 1 <option />     <option value = "2"> 2 <option />     <option value = "3"> 3 <option />     <option value = "4"> 4 <option /> </ select>

 

 

 

참고 문헌 : 웹토딩 시작하기 - 풀스택으로 만드는 나의 첫 홈페이지 (정보문화사)