티스토리 뷰




HTML5에서 웹페이지를 만들때 로그인, 회원가입창을 만들어 회원을 모을수 있다.

이 로그인,회원가입할때 입력 요소들 중에서 가장 중요한 요소는 이번에 알게될 <input>요소이다.

<input> 요소에는 여러가지 형태가 있다. input안 type속성만 변경해주면 다양한 형태를 만들수 있다.

이를 이용하여 로그인창, 회원가입창을 간단히 만들어보자.




이전 HTML포스트


 

[HTML무엇일까] HTML5, 에디터, 기본구조 알아봅시다

[HTML5] 2. 웹페이지를 만들어보자 (텍스트,주석,수평선)

HTML5공부3. 리스트,링크,이미지,테이블

HTML5공부4. 웹페이지에 동영상 넣는법.





<input> 형식


<input> 태그의 일반적인 구조는 이렇다.



<input type="button" value="입력" name="button" />



해석을 해보자면


 type="button"

 type 속성= 입력필드종류로결정

 value="입력"

 버튼에 나타나는 텍스트

name="button1" /> 

name속성은 서버로 전달되는 이름. 


이게 <input>일반적인 구조이다.





이제 type 속성 여러개를 알아보자.


 text

텍스트를 입력할 수 있는 한줄짜리 필드 

 password

비밀번호를 입력할 수있는 한줄짜리 필드 

 radio

라디오 버튼 

checkbox 

체크박스생성 

file 

파일 이름을 입력하는 필드 생성 

reset 

초기화 버튼, 누르면 입력필드가 초기화 

image 

이미지를 전송 버튼으로만든다. 

hidden 

사용자에게는 보이지 않지만 서버로 전송 

submit 

제출 버튼 



이렇게 글만 보면 무슨 뜻인지 모를것같아서 하나하나 예제를 보여주겠습니다.







<input type ="text">


텍스트타입은 이처럼 텍스트를 입력할 수 있는 필드를 생성합니다.







<input type ="password">


패스워드타입은 이처럼 사용자가 입력한 글자가 안보이도록 해줍니다.







<input type ="radio">


라디오 타입은 라디오 버튼을 정의한다 여러항목 중 하나만을 선택할수 있다.







<input type ="checkbox">


체크박스타입은 라디오타입과 달리 여러개의 항목을 선택할수 있다.







<input type ="submit">



제출타입은 데이터를 서버로 전송하는데 사용된다. 버튼을 생성해서 누를수있다.







<input type ="reset">


리셋타입은 초기화 버튼이다. 버튼을 누르면 입력 필드에 입력된 값이 모두 초기화가 된다.







오늘 알아본 <input> type들을 가지고 한번 로그인 ,회원가입창을 만들어보자. 물론 구체적으로 하기는 어렵겠지만

로그인, 회원가입 틀만 만들어보자.ㅋㅋ


댓글
댓글쓰기 폼