목록INPUT (6)
web sprit
number 속성은 잘 쓰지 않지만 사용시 선언을 하면 아래와 같은 화면이 보여집니다. 대표적으로 위 아래의 버튼을 없애고 싶다........면 css 에 아래와 같이 선언해주면 됩니다. input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* 파이어폭스에서의 초기화 방법 */ input[type=number] { -moz-appearance: textfield; } # 참고 https://wallel.com/select-box-input-box-style-%..
작업 시 브라우저 자동완성 기능으로 보안이나 UI면에서 방해 요소로 작용합니다. 자동완성을 막기 위해 아래와 같은 속성을 추가 해야 합니다. 속성값으로는 on 과 off이 있습니다. on은 default 값으로 기존에 입력한 내용의 값이 있다면 자동완성 기능으로 화면에 목록으로 표시 됩니다. 이 기능을 비활성화 하고 싶다면 off 값을 넣어주면 됩니다. 개별마다 autocomplete 값을 off으로 주면 너무 번거로울 수 있습니다. form 요소 전체에 autocomplete 값을 off으로 주고 싶다면 아래와 같이 적용해 주면 됩니다. ............. * 부연설명 name : Form 태그를 통해 다른 페이지로 값을 전송할 경우 name 속성을 이용합니다.
모바일에서 input 태그 폼영역을 터치하면 Android 나 IOS 에서 내용을 작성할 수 있는 키패드가 나옵니다. 이 부분을 글자를 적는 키패드가 아닌 숫자만 적을 수 있는 숫자 키패드만 나오게하는 방법이 있습니다. input 태그 작성 시 다음과 같이 작성하면 됩니다. 하지만 다음과 같은 방법은 치명적인 오류가 있습니다. Android에서는 숫자 키패드가 나오지만 IOS 에서는 키패드가 나오지 않습니다. IOS 에서도 똑같이 숫자 키패드가 나오게 하기위해선 다음과 같은 속성을 추가해 줍니다. 위와 같이 적용하면 Android OR IOS 모두 숫자키패드가 나옵니다. 또 한가지 팁 !!! input 의 type 이 number 일때 maxlength를 설정하려고 하면 실제 화면에서는 maxlength..
프로젝트를 진행하다가 input 태그에서 마우스 클릭을 하면 알수 없는 자동완성 목록이 뜨는걸 확인할 수 있었다. 부트스트랩 프로젝트 였는데 이 기능이 부트스트랩에서 지원해주는 줄만 알고 쓸데없이 소스 까보는 불상사를 격어 이렇게 블로그에 정리한다. 우선 자동완성에 대한 부분을 안뜨게 하고 싶다면input 속성으로 autocomplete=off 으로 설정해주면 다시는 안나타는것을 확인할 수 있다.on으로 설정안해도 브라우저에 따라 지원되는 브라우저가 있기 때문에 꼭 자동완성창을 제거하고 싶다면 위의 설정값을 줘야 한다.123 Colored by Color Scriptercs
HTML5 Input Types color date datetime datetime-local email month number range search tel time url week 1. Base (기본)1cs- 웹에서의 폼은 사용자 입력부분과 서버 전송 버튼으로 나눔- 사용자 입력 부분은 거의 태그를 이용해 처리 함- 태그의 type=""속성을 통해 입력하는 내용이 어떤 정보인지를 지정 함- type=""속성 값에 따라 사용할 수 있는 속성들도 다름 2. type2-1. hidden1cs- 숨겨진 입력필드를 정의 즉, 화면상에 폼에는 보이지 않지만, 폼을 서버로 전송할 때 함께 전송되는 요소- 예를 들어, 회원가입 폼에서 가입 경로, 날짜와 같이 굳이 사용자가 입력하지 않아도 알 수 있는 정보들을 서..
input의 placeholder속성은 input란에 대한 설명을 보여주기 위한 html5 속성이다.placeholder는 낮은 브라우져에 적용이 안되어 나오지 않는다.예로 익스7~9에 나오지 않는다. 이런 문제를 해결하기 위하여 placeholders.min.js 를 사용하면 된다. 사용 방법은 매우 간단하다.스크립트 태그로 placeholders.min.js 를 연결하여 그대로 사용하면 적용 된12345 /*위와 같이 작성하면 익스7~9 모두 적용된다.*/cs 결과 :