[html5]웹 fieldset, legend, input 태그 속성 (placeholder 등)

이번에는 먼저 코드를 첨부하고 포스팅을 시작하겠습니다.

이번에도

시작하기 전에

익스플로러나 파이어폭스 등에서는 화면이 제대로 보이지 않습니다.

크롬을 이용해주세요!!!!!

                                 

                                   
				
                                    

					
필드 힌트 보여주기
					

						
required
						
핸드폰 번호
						
이메일
						
학번
					
					
				
				
				

					
List
					

						과일종류 : 
						
					
				
				
				

					
패턴속성
					

					주민등록번호 : 
					
				
				
				

			
		

먼저, fieldset태그와 legend 태그를 알아보겠습니다. 

입력 양식을 설명할 때 사용합니다. 

 box로 둘러져 있어서 입력하는데 보기 좋게 출력됩니다. 

그리고 Input 태그에 속성 몇가지를 적어뒀습니다.

 required="required" : 필수적으로 입력해야할 창입니다. 

placeholder="01011112222" : 아무 것도 입력하지 않았을때 예비적으로 글자를 출력합니다.

autofocus="autofocus : 창이 처음 진입했을때 커서라 autofocus가 적용된 태그로 이동합니다.

이제 과일종류로 가시면 datalist 태그를 확인 할 수 있습니다.

일반 selectBox에 텍스트를 입력 할 수 있는 기능이 추가된 태그입니다.

그리고 주민등록 번호 쪽으로 가시면 pattern="\d{6} - \d{7}"  를 보실 수 있는데

패턴이 적용된 경우 입니다. 

6글자의 숫자 - 7자리 숫자를 입력하라는 신호 입니다. 이 패턴데로 입력하지 않으면 메시지를 출력합니다.

위의 코드를 실행 시킬수 있도록 아래에 창을 만들어 두겠습니다.

1. 아무것도 입력 하지 말고 "전송 버튼을 누르세요"

2. required에 아무 문자나 입력하시고 '주민등록번호'에 1111을 입력하시고 전송을 누르세요.

필드 힌트 보여주기

• required
• 핸드폰 번호
• 이메일
• 학번

List

과일종류 :

패턴속성

주민등록번호 :

참고그림