<HTML5+CSS3> 사용자가 정보를 입력하는 input 태그

<input>태그

-웹에서의 폼은 항상 일정한 형태를 가지고 있다. 크게 사용자 입력 부분과 입력한 내용을 서버로 보내주는 버튼 부분으로 나눌 수 있다.

사용자 입력부분:<input>태그 처리 (거의)

입력하는 내용이 어떤 정보인지는 type속성을 지정 그 값에 따라 함께 사용할 수 있는 속성들도 달라집니다.

EX)<input type="유형" 속성="속성값">

글로벌 속성 id

-폼을 만들다보면 똑같은 요소가 여러 번 사용된다. ex)<input type="text">처럼 입력 항목이나 주소항목등 한줄짜리 텍스트를 모두 이렇게 텍스트 필드를 사용하게 되는데 이러한 요소를 구분하기 위해 사용하는 것이 id속성이다.

id속성=글로벌속성 이라고 하는 것은, 폼 요소뿐만 아니라 웹 문서에 넣는 텍스트,이미지,표,폼 등 모든 태그에서 사용하기 때문입니다.

%단 , id 속성에 사용할 수 있는 값은 영문과 숫자, 언더바나 하이픈으로 이루어진 이름입니다. 숫자시작 X

ex)<input type="text" id="username" size="10">

    <input type="text" id"addr" size="40"> 

<input>태그의 type 속성에서 사용 가능한 유형

-지금부터 소개하는 내용은 자주 사용하는 것이므로 모두 알아두어야 합니다.

1. hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가지는 필드

2. text     : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.

3. search  : 검색 상자를 넣습니다.

4. tel       : 전화번호 입력 필드

5. url       : URL 주소를 입력할 수 있는 필드

6. email   : 메일주소 입력 필드

7. password: 비밀번호 입력 필드

8.number  : 숫자를 조절할 수 있는 화살표

9. range   : 숫자를 조절할 수 있는 슬라이드 막대

10.color   :  색상 표

11.checkbox : 주어진 항목에서 2개이상 선택 가능한 체크 박스

12.radio   : 주어진 항목에서 1개만 석택할 수 있는 라디오 버튼

13.datetime : 국제 표준시로 설정된 연도,날짜와 시간

14.datetime-local : 사용자가 있는 지역을 기준으로 날짜와 시간

15.date     : 사용자 지역을 기준으로 날짜(연,월,일)

16.month , week : 사용자 지역 기준 (연,월) 과 (연,주)

17.time     :사용자 지역 기준으로 시간 

18.button  : 버튼 추가

19.file       : 파일 첨부할 수 있는 버튼

20.submit  : 서버 전송 버튼

21.image   : submit버튼 대신 사용할 이미지

22.reset     : 리셋 버튼

1-hidden - 숨어있는 필드

ex) <input type="hidden" name="이름" value="서버로 넘길 값">

2-text - 텍스트 필드

ex)<input type="text" 속성="속성값">

텍스트 필드에서 사용할 수 있는 속성

2-(1)name : 텍스트 필드를 구별할 수 있도록 붙이는 이름

2-(2)size   : 텍스트 필드의 길이 지정,화면에 몇 글자를 입력할 수 있는지 지정 영문 글자 단위로 지정.

2-(3)value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용. 이속성을 사용하지 않으면 빈 텍스트 필드가 표시된다.

2-(4)maxlength:ㅡ 필드에 입력할 수 있는 최대 문자 개수 지정

8,9-type="number","range" 숫자 입력하기

-number:스핀 박스에 화살표를 눌러 숫자를 입력하게 하는 것.

 range   :슬라이드 막대로 숫자를 입력하게 하는 것 .

ex)<label>주문개수:<input type="number" min="1" max="5" value="1"> 박스 (1인당 최대 5박스) </label>

   

   <label>주문개수:<input type="range" min="1" max="3" value="3"> 박스 (1인당 최대 5박스) </label>

 

250 p 그림 참고

속성값은 동일하다 

8,9-(1)  min : 필드에 입력할 수 있는 최솟값 type="range"일 때 기본 최솟 값은 0

8,9-(2)  max : 필드에 입력할 수 있는 최댓값 type="range"일 때 기본 최대값은 100

8,9-(3)  step : 짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자의 간격 지정 기본값=1 생략 가능

8,9-(4)  value :  필드에 표시할 초기값.

%이 속성들을 지원하지 않는 파이어폭스와 인터넷 익스플로러에서는 일반적인 테긋트 상자로 표시.(사용자가 직접숫자입력해야한다)

12-"radio"- 라디오 버튼 넣기

-라디오 버튼은 여러 개의 항목 중에서 한 가지만 선택하도록 할 때 사용하는 버튼입니다.

ex)<p> 동의하십니까 ? </p>

<label><input type="radio" value="yes" name="agreement"> 동의함 </label>

<label><input type="radio" value="no" name="agreement"> 동의하지 않음 </label>

%<label>태그를 사용하지 않으면 텍스트를 눌러도 선택이안됨 박스만 눌러야함, 태그를 사용하면 글자를 눌러도 선택이 됨.

속성

12-(1) name: 라디오 버튼이 여러 개 있을 경우 구분하기 위해 이름 지정 같은 그룹끼리는 name속성 값을 똑같이 해주면 됩니다.

12-(2) value: 라디오 버튼을 클릭했을 때 그 항목이 선택되어싿고 서버로 알려주어야 하는데, value속성을 사용해 서버로 넘길 값을 지정, (단, 이 값은 영문이거나 숫자여야 하며, 필수 속성입니다.)

12-(3) checked: 라디오 버튼의 항목들은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, checked속성을 사용하면 처음에 선택된 상태로 표시됩니다.