Dio's Story

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

토요일 오후 9시경 퇴근을 위해

오토바이를 타고 가다가 사고가 -ㅅ ㅠ

죽다가 살아났네요 ㅠ ㅠ...

오토바이는 폐차일듯 ㅠ ㅠ......

모두들 조심하세요...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

(먼데 제목이 맨날 반말이냐? -_ -;)
죄송합니다 ;; ㄷㄷ;;;
이번에는 input type="text" 에서 value 값을 주었을경우
지워지지 않게 하는 속성에 대해서 알아보겠습니다.
<input type="text" name="join_name" size="20" value="아이디" readonly="readonly">
뒤에 readonly 라는 부분이 붙었죠?
저것이 삭제가 안되도록 하는 부분입니다. 보통 readonly는
회원정보수정란에 많이 쓰이죠? 정보수정에서 바뀌면 안되는 부분은 readonly로 처리를 합니다
원래는 readonly만 써도 되지만 웹표준2.0에서는 readonly="readonly"로 표준을 잡았습니다.

이번에는 글자수 제한 걸기에 대해서 알아볼께요 ~
<input type="text" name="join_name" size="6" value="아이디" maxlength="6">
max는 최대라는 뜻이죠? length는 길이라는 의미입니다.
직역하자면 최대길이 라는 의미죠? 최대길이는 6~ 6글자로 제한을 거는것이죠
이것이 쓰이는곳은 아무래도 전화번호가 알맞겠죠?
아이디나 비밀번호도 글자수에 제한이 있기때문에 제한을 걸어둡니다.
하지만 이것만으로는 완벽하게 제한이 안되기 때문에 자바스크립트에 제어문으로
제한을 걸고 php로도 정규식으로도 제한을 걸고 여러가지 방법을 써야한답니다 ~
워낙에 오토프로그램이나 스팸등록기등이 많기 때문이죠 ㅇㅅㅇ

이번에는 체크박스와 라디오버튼에서 특정 1개만 체크하게 만드는방법입니다.
<input type="checkbox" name="box" value="1" checked="checked">
checked는 자동 체크가 되게 하는 명령어입니다.
checked도 마찬가지로 checked만으로도 되지만 웹표준 2.0에 표준에 맞는 문법은
checked="checked"입니다 ^^

이번엔 이만하고 다음엔 select에 대해서 알아볼께요 ~

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

위와 같은 것이 Form 이다 ~ (설마 끝? 맞을까? -_-+)
쿨럭...음.. 끝낼라했더만 -_ -;;;(섬뜩...)
이외에도 회원가입창이라던가 Form에는 무수히 많은 종류의 문서가 존재한다
하지만 그것들은 만드는 방식과 배치의 차이일뿐,
테이블을 잘 이해하셨다면 이제부터 공부할 form의 몇몇 명령어들만 이해하시면
여러분들도 저런 form을 만드시는게 어렵지 않을 것입니다.
참고이 위의 form은 css와 html 만으로 이루어졌으며,
견적신청과 우편번호 검색과 데이타검색을 위한 자바스크립트와 php로 이루어져있습니다.

이제는 form의 기본 명령어에 대해서 알아보도록 하겟습니다.

form의 기본 형식은 <form name="join_form" method="" action="">테이블,div 등의 내용</form>
위와같이 시작태그와 엔드태그로 끝이 나는데 여기서 name는 다들 아시겠지요?
이름을 주어서 객체화 시킴으로써 css나 자바스크립트로 제어하기 위한 부분이고요
method는 form데이타를 넘기는 방식인데 get방식과 post 방식이 있습니다.
이부분은 후에 PHP에서 다시 다루도록 하겠습니다.
action은 form 데이타를 넘길 경로인데요, 이부분도 php에서 다루도록 하겠습니다.
한마디로 html과 java script(자바스크립트)에서 필요한건 name밖에 없군요 -ㅅ -;;(장난하냐? -_ -+)
음...;;; 이..제 form안에 쓰여지는 input 명령어에 대해서 알아보겠습니다.
input의 기본 형식은 <input type="" name="" value="" size=""> 로 이루어져 있는데요
위에 성함 부분에 보면 옆에 text를 쓸수 있는 창이 있습니다.
그 창은 <input type="text" size="20" name="join_name"> 라고 하면 20글자를 넣어도 보이는 크기의
text 창이 만들어집니다.
text창은 매우 많은 부분에 쓰임으로 알아두셔야 하겠죠?
다음은 비밀번호를 쓰는 부분을 말해드리겠습니다.
비밀번호는 ? password 죠? ( 약 먹었냐? -_ -)
;;; 비밀번호는 <input type="password" size="20" name="pass"> 라고 하면 텍스트 창이 만들어지지만
그안에 글을 썼을때는 비밀번호 창처럼 ●●●●● 이런식으로 쓰여지게 됩니다.
이제 size와 name은 아시겠죠? 그리고 input은 type에 의해서 쓰이는 용도와 형태가 변형된다는것을
아실거라고 생각됩니다.
위에는 없지만 네모난 상자에 체크하는부분 있죠? 그건 checkbox라고 하고요
위처럼 동그란원에 선택시 검정동그라미가 찍히는건 radio 라고 합니다.

여기서는 html과 text를 같이 쓸려니 번거로워서 텍스트에디터로 만들어서 스샷으로
찍어서 올려요 ㅇㅅㅇ
여튼 checkbox와 radio를 각각 input type에 써주면 된다는건 아시겠죠?
위에서는 value라는 항목을 언급해놓고는 왜 말을 안하냐고 하시는 분들이 있겠죠?
value는 말 그대로 값입니다.
예를 들면 <input type="text" name="text_box" size="20" value="이곳은 아이디를 적는 부분입니다">
라고 적으시면 텍스트창에 "이곳은 아이디를 적는 부분입니다." 라고 뜨게 됩니다.위에 그림과 같이 말이죠. 이제 value가 먼지 이해가 가시겠죠?
어떤 사이트는 회원가입시에 아이디부분에 id는 영어 소문자와 숫자 조합만 가능합니다.
라고 텍스트창에 써있는데, 텍스트창을 클릭하면 그 글이 사라지죠?
이것은 자바스크립트를 이용한 것으로 조만간 자바스크립트를 하면서 다루도록 하겠습니다.
아 마지막으로 <input type="submit" value="가입하기"> 라는 submit 이라는
타입도 존재하는데 submit는 전송 이라는 의미입니다. 흔히 회원가입시 가입 버튼이라던가
견적 신청시에 견청신청 버튼 메일보낼때 보내기버튼 이런것들이 submit 버튼입니다.
이부분도 html에서는 크게 다루기가 힘든부분이고, 자바스크립트와 php부분에서
다시 다루도록 하겠습니다. 그리고 reset 버튼도 있는데 이것은 폼에 적힌 모든 값을
초기화 시키는 버튼입니다. 또 input type="button" 버튼도 있는데요 버튼도 버튼만으로는 효과가 없고요
자바스크립트를 이용한 location 이라는 객체를 사용해서 이동시키는 효과를 만들수가 있습니다.
또, input type="file" 라는것이 있는데 이것은 파일업로드 버튼을 만드는 것입니다.
파일전송시에는 프로그래밍이 들어가기때문에 이부분도 php에서 다시 다루겠습니다
(이러다 멀 다루어야 할지 까먹겟네 -_-;;;;;)
왼쪽부터 button , submit , file , reset 입니다.
input에 대해서는 여기서 마치도록 하고 다음엔 글자수 제한걸기와, value값 지정시
안지워지게 하기하고, select바를 만들어 보도록 하겠습니다.