웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
무심코 지나치기 쉬운 인푸트(input)폼에 대한 몇가지들....
2003.05.23 21:05
흔히 인푸트(input)폼 를 꾸밀때 그냥 겉모양과 테두리만 꾸미시는분들이 대부분(?) 일거에요.
아래의 그외의 실전예제 몇가지를 올려봅니다.
특히 전송버튼이 이미지일때 유용하게 쓰일겁니다.
그냥 보는것보단 집적 태그연습장이나 메모장에 복사하여 테스트를 해보시면 이해가 빠를듯 하네요....
<!-- 일반적인 인푸트폼 -->
<input type="password" name="pw" size="12">
<!-- 글자제한과 폰트사이즈 지정 font-size:7pt; -->
<input type="password" name="pw" size="12" maxlength="7" style="font-size:7pt;">
<!-- 글자제한과 폰트사이즈와 백그라운드이미지 지정 background-image:url('test.gif'); -->
<input type="password" name="pw" size="12" maxlength="7" style="font-size:7pt;background-image:url('test.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px;">
<!-- 인푸트폼의 넓이와 높이를 지정 width:150pt; height:12pt; -->
<input type="password" name="pw" style="width:150pt; height:12pt;font-size:7pt;">
아래의 그외의 실전예제 몇가지를 올려봅니다.
특히 전송버튼이 이미지일때 유용하게 쓰일겁니다.
그냥 보는것보단 집적 태그연습장이나 메모장에 복사하여 테스트를 해보시면 이해가 빠를듯 하네요....
<!-- 일반적인 인푸트폼 -->
<input type="password" name="pw" size="12">
<!-- 글자제한과 폰트사이즈 지정 font-size:7pt; -->
<input type="password" name="pw" size="12" maxlength="7" style="font-size:7pt;">
<!-- 글자제한과 폰트사이즈와 백그라운드이미지 지정 background-image:url('test.gif'); -->
<input type="password" name="pw" size="12" maxlength="7" style="font-size:7pt;background-image:url('test.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px;">
<!-- 인푸트폼의 넓이와 높이를 지정 width:150pt; height:12pt; -->
<input type="password" name="pw" style="width:150pt; height:12pt;font-size:7pt;">
댓글 4
-
아리마
2003.07.14 19:31
아주 좋은 팁입니다 안그래두 구하고 있었는데 정말 감사 해요~^^ -
한복규
2003.08.28 21:17
input type="post"에 대한 강좌도 부탁드립니다.... 내 컴에 아울룩 설정이 되어있지 않아도
메일을 보낼 수 있는 팁이 있었으면 좋겠습니다... .....................password 잘 봤습니다^^ -
윤현호
2004.04.29 23:10
으윽 이걸 바로 어제만 봤어도, css로 input 색 새로 지정하고, 그걸 인클루드 시키구. 썡쇼를 해서, 겨우 원하는 모냥새를 맹글었는데..T___T 우웅.. 원츄~! T_Tb -
차병권
2004.10.21 09:52
감사합니다 .. 딱 이거 찾고 있었어요..
제목 | 글쓴이 | 날짜 |
---|---|---|
[초보자용] 노프레임 이해하고 만들기 [16] | zeroMD™ | 2003.06.05 |
개미선 없애기.. [10] | -크크크- | 2003.06.04 |
무심코 지나치기 쉬운 인푸트(input)폼에 대한 몇가지들.... [4] | RedEye(rinja) | 2003.05.23 |
CSS파일이용하여 링크에 건반효과주기(강력추천) [8] | 호호짱 | 2003.05.23 |
onload 두개 사용하려고 할때... [5] | chosun815 | 2003.05.20 |
세계인구와 한국인구 구하기 애플릿 소스 [3] | TimeMode | 2003.05.19 |
동영상이 로딩될때까지 이미지 보여주기 [8] | ZipShin | 2003.05.19 |
더블클릭으로 웹문서 새로고침 하기 [3] | RedEye | 2003.05.09 |
HTML 암호화시킨것 풀어주는소스(암호화도가능) [11] | 호호짱 | 2003.05.06 |
쭘식 메뉴만들기 - 세로 슬라이드 메뉴 [11] | 쭘's | 2003.04.29 |
label태그 아십니까? [6] | ZipShin | 2003.04.27 |
이미지 테두리에 점선 두르기 [6] | ZipShin | 2003.04.15 |
textarea 세로 글쓰기 [1] | ZipShin | 2003.04.15 |
[html 초보용] 홈페이지 무작정 따라하기!② [3] | 깻잎사랑=_=v | 2003.04.14 |
[html 초보용] 홈페이지 무작정 따라하기!① [6] | 깻잎사랑=_=v | 2003.04.14 |
textbox의 값을 오른쪽부터 채우기. [1] | RedEye | 2003.04.12 |
새창뜨는 링크 누를때 스크롤바 고정시키기 [8] | REAL | 2003.04.09 |
이미지 링크로 사용하다가 짤렸을때 대체 이미지 [6] | REAL | 2003.04.09 |
링크 클릭시 사운드 효과 [3] | REAL | 2003.04.09 |
[re] 링크 클릭시 사운드 효과 [헤헤~ 더 간단하게] [5] | RedEye | 2003.04.13 |