HTML - input태그와 그 속성 type, value, name - 입력태그 (1)

HTML - input태그와 그 속성 type, value, name

입력태그 (1)

 오늘은 input태그와 그 속성 type, value, name에 

대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 

input태그란?

input태그란 form 태그 안에서 추가되는 입력 요소들 중

가장 중요한 태그 입니다.

input태그는 사용자로 부터 정보를 받아들이는 용도로 사용되는데

input 태그의 type이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용됩니다.

한마디로 예를들어 로그인폼 회원가입 폼등 여러가지 정보를

입력하는 쪽에서 많이 사용됩니다. ^^

<input type="button" value="버튼입니다." name="btn" />

<input 태그 형식>

위 input 태그로 웹브라우저상 버튼을 만들어 보았습니다.

input 태그는 닫는태그가 없으며 태그안에 type 속성과 vlaue 속성 

그리고 name 속성을 이용하여 작성 하는데 각 속성이 하는 역활은 아래와 같습니다.

1. type : 입력 태그의 유형 

2. vlaue : 입력 태그의 초기값을 말하며 사용자가 변경 가능 합니다.

3. name : 서버로 전달되는 이름을 말합니다. (사용자 임의 지정)

위 input 속성 3가지 type, vlaue, name에 대해서 알아 보았는데

여기서 type 속성 에는 여러가지 속성값이 있는데 이 내용은 아래와 같습니다.

type 속성값	내용
text	텍스트를 입력하는 창을 생성 합니다.
password	비밀번호를 입력하는 창을 생성 합니다.
radio	라디오 버튼을 생성 합니다.
checkbox	체크박스를 생성 합니다.
file	파일 이름을 입력하는 창을 생성 합니다.
image	이미지를 전송 버튼으로 만듭니다.
hidden	사용자에게 보이지는 않지만 서버로 전송됩니다.
submit	서번로 제출/전송하는 버튼을 만듭니다.
button	일반 버튼을 생성 합니다.

<type 속성의 속성값>

먼저 위 속성값 중에서 중요한 내용에 대해서 간단하게 설명하겠습니다.

 

1. 텍스트

위 는 타입 속성에 텍스트 값을 넣어 <br>태그로 개행 후 웹 브라우저상에 출력한 모습 입니다.

위 아래 다른점은 value 값을 넣은 점인데 value 값을 넣어주면 input 속성에 넣어주면

텍스트 창에 이름이 표시 되어 출력 됩니다.

2.  패스워드 

위 는 타입 속성에 패스워드를 입력하여 웹 브라우저상에 출력한 모습입니다.

3. 라디오 버튼

위 는 타입 속성에 라디오 값을 넣어 웹 브라우저상에 출력한 모습입니다.

라디오 버튼 생성시 반드시 vlaue 값과 name 값을 꼭 지정해야 하며 여기서 

vlaue 속성은 임의로 하되  name 속성은 무조건 동일한 이름을 넣어줘야 

해당 라디오 버튼이 같은 그룹으로 인식이 됩니다.

추가로 마지막 비고 부분 제일 끝 checked 속성은 

웹브라우저 출력시 라디오 버튼이 어느 부분에 먼저 체크를 해놓는가

할 때에 사용 되는 속성이며 checked 속성을 없애고

출력 했을때에는 웹 브라우저 상 라디오 버튼에 아무것도

체크 되어 있지 않을 것입니다.

4. 제출/전송 버튼 / 초기화 버튼

위 는 가장 먼저 form 태그에 name 속성으로 input 을 지정하고 

action 속성으로 데이터가 전송될 스크립트 파일 지정 후 method 속성으로 보내질

데이터가 get 방식이란걸 표시하였다.

(위 method 속성 추후에 html 입력양식에서 

post 방식과 get방식에 대해 자세히 알아보도록 하겠습니다.)

그 다음 form 태그 안에 가장 먼저 위치한 

첫번째 input 태그에 속성에 텍스트를 넣어 이름 id를 주고 <br> 태그로 개행 한 뒤

제출/전송 submit 속성과, 초기화 reset 를 작성하였습니다.

실행해서 사용하였을때  텍스트 부분에 이름을 입력하고 제출/전송 버튼 클릭시

위 form 태그에 지정된 get 방식으로 임의 스크립트 xxxxx.jsp 페이지로 보내지게 되고

텍스트에 입력된 글을 초기화 시킨다면 초기화 버튼을 누르면 텍스트에 입력된 양식이

모두 초기화 되어버립니다.

5. 일반버튼 생성

위 는 input 태그에 버튼 속성을 넣고 vlaue 속성의 값으로 "요기 눌러봐"를

입력한뒤 onclick 속성을 이용해서 버튼 클릭시 "까꿍!"을 출력해 보았습니다.

본래 onclick 속성은 버튼이 실행되면 자바스크립트 코드를 가져오는 역활로

쓰이는데 정확한 설명은 추후 자바스크립트 부분에서 설명 하도록 하겠습니다.

여기까지 HTML - input태그와 그 속성 type, value, name에 대해서 기록해 보았습니다.

그리고 위에서 말하지는 않았지만  type 속성의 값은 위에 있는게 전부가 아니라 기본적인 내용만

적어둔 것이며 현재 html5에 들어서 신규 추가된 type 속성은 정리가 되는데로 이어서 포스팅할 생각 입니다.

 그리고 다시 한번 말하지만 백번 보는 것 보다 

한두번 써보고 실행해 보는것이 이해하기 쉬우니 한번 해보시기 바랍니다. ^^

이상 HTML - input태그와 그 속성 type, value, name - 입력태그 (1)에 

관련된 포스팅을 마치도록 하겠습니다.