HTML 로그인창 만들기
- 꿀 정보
- 2020. 4. 23. 00:16
HTML5에서 웹페이지를 만들때 로그인, 회원가입창을 만들어 회원을 모을수 있다.
이 로그인,회원가입할때 입력 요소들 중에서 가장 중요한 요소는 이번에 알게될 <input>요소이다.
<input> 요소에는 여러가지 형태가 있다. input안 type속성만 변경해주면 다양한 형태를 만들수 있다.
이를 이용하여 로그인창, 회원가입창을 간단히 만들어보자.
<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들을 가지고 한번 로그인 ,회원가입창을 만들어보자. 물론 구체적으로 하기는 어렵겠지만
로그인, 회원가입 틀만 만들어보자.ㅋㅋ
'꿀 정보' 카테고리의 다른 글
인스타 아이디 바꾸기 (1) | 2020.04.26 |
---|---|
페메 메세지 삭제 1초팁 (0) | 2020.04.23 |
HTML 로그인창 만들기 (0) | 2020.04.23 |
HTML 웹페이지 동영상 넣기 (0) | 2020.04.23 |
컴퓨터활용능력 1급 필기 합격 노하우,꿀팁 (0) | 2020.04.20 |
C언어 문자열배열 (0) | 2020.04.19 |