입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다.먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다.i. form 태그를 제거하기> 수정 이전<form> <input type="text" /> </form>> 수정 이후 (form 태그를 div로 변경)<div> <input type="text" /> </div>ii. keydown이벤트 추가 후 엔터키 이벤트 제거하기다른 방법으로 엔터키 발생시 preventDefault()를 추가합니다.- 모든 엘리먼트에 적용하기document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { e
2017-08-07 09:07:38파일 업로드시 input 태그를 많이 사용input 태그 accept 속성 사용하는 방법은?<input accept="image/*" /><input accept="video/*" /><input accept="audio/*" /><input accept=".txt, .doc, .docx" />accept 속성값으로 아래와 같이 사용 가능합니다.media_typeextension nameimage/*, video/*, audio/*UI에서 바로 해당 파일 목혹만 접근해주는 장점이 있음. 예를들어 이미지로 설정된 경우 탐색기 또는 모바일 파일검색시 이미지로 필터링이 적용됨...위 속성은 IE 10 이상에서 가능합니다. 또한 HTML 4.01, HTML5의 값이 차이가 있습니다.
2017-05-17 15:02:07검색페이지 초성으로 검색하기 구현하는 방법
2017-05-01 21:02:51입력폼을 구성하는 다양한 요소들 중 input 태그의 체크박스나 라디오 버튼 등이 많이 사용되죠. 이런 요소들은 다양한 선택 요소들 중 방문자로부터 선택 값을 얻을 수 있는 편리한 인터페이스를 제공하고 있습니다. 이런 입력폼을 label 태그와 함께 사용하면 원하는 input 태그 등의 입력폼을 체크하거나 언체크 등의 행동이 가능합니다.label 태그는 다양한 형태로 활용될 수 있으며 아래는 퍼블리싱 단계에서 다양한 방법으로 활용이 가능한 label 태그의 쓰임에 대하여 정리한 내용입니다. 다양한 상황에서 활용되는 label 태그의 쓰임을 알아보세요.# label 태그의 역할label태그가 하는 일은 input 태그를 제어하여 상태값을 변경하도록 돕습니다. 이는 input 태그만으로 선택하기 어렵거나 더 좋은 사용자 경험을 제공하기 위한 용도이며 만약 label이 없이 input 태그만 클릭하여 선택하는 경우를 생각해보세요. input 태그 자체는 영역이 작아 클릭하기 어렵거나 서로
2017-01-10 11:04:54사용자가 입력한 값을 서버에 전달하기 위한 입력 양식으로 텍스트 타입이 아닌 숫자타입인 경우가 있습니다. 예를들어 가입월 또는 일등을 나타낼때 숫자로 입력받게 합니다. 이런 경우 input 태그의 type 속성을 사용하는데 text가 아닌 number를 지정하여 값을 얻는 방법에 대하여 알아보려 합니다. 간단한 코드 모습은 아래와 같습니다.<input type="number" value="" />! type을 넘버로 지정할 경우 장점타입 설정을 text가 아닌 number로 입력할 경우 어떤 장점이 있을 수 있는지 알아보겠습니다.1. 숫자만 입력받는데 용이이는 number 지정시 숫자만 입력이 가능하기 때문입니다. 다시말해 숫자가 아닌 다른 타입은 자동으로 표시되지 않습니다. 만약 다른 타입을 설정할 경우 별도로 숫자 이외의 타입에 대하여 스크립트를 사용해 키보드 이벤트를 제어하거나 아니면 서버에 전송하기 입력된 값을 검증해야하나 이런 별도의 스크립트 작성을 하지 않아도 됩니다.2.
2016-07-20 15:26:47웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한다면 더욱 편리하게 관리할 수 있을 것이다. 이에 html에는 fieldset이라는 태그가 존재하며 이 태그를 사용할 경우 다수의 입력폼들을 그룹화하여 관리 및 콘트롤할 수 있다. 그럼 아래에서 좀 더 자세한 내용을 확인해보자.! fieldset 태그 알아보기fieldset 태그는 아래와 같은 몇 개의 속성들을 지정하여 사용할 수 있으며 각각의 속성들의 특징은 다음과 같다. 아래처럼 이 태그에 사용가능한 태그는 매우 한정적이다.disabled - 해당하는 그룹을 모두 disable 할 수 있음form - 원하는 form을 선택할 수 있음name - 원하는 name 속성을 선택할 수 있음이 태그의 가장 큰 장점 중 하나로 퀀한에 따른 선택 그룹 전체를 비활성화(Disable
2016-06-30 14:23:06오늘 알아볼 내용은 입력폼 중 하나인 input 태그가 체크박스 또는 라디오 타입으로 어떤 값을 가지고 있을때 이를 체크하였는지 확인할 수 있는 다양한 방법에 대하여 알아보고자 한다. 방문자가 이를 클릭했을경우 이를 불러오기 위한 방법은 어떤 것이 있을까?우선 순수 자바스크립트의 방법을 알아보고 제이쿼리를 활용했을때의 방법도 알아볼 것이다. 먼저 자바스크립트를 사용한 방법을 예제와 함께 자세하게 알아보자.빨간 라인이 방문자가 클릭가능한 라디오 버튼이다.아래 방법은 순수 자바스크립트 방법을 사용한 방법이다. 사실 최근에는 제이쿼리나 기타 라이브러리를 활용하기 때문에 이 코드는 많이 사용되지 않을 수 있다. 하지만 가장 기본이 되는 방법으로 알아야 할 필요가 있을 것이다.그럼 아래 예제를 통해 자세히 알아보자... 아래 예제는 먹고 싶은 과일을 체크하는 예제이다. # input 태그체크 확인하는 예제보기이 예제는 방문자에게 먹고 싶거나 좋아하는 과일을 선택하도록 하는 설문조사 페이지의
2016-05-14 09:20:31아이폰에서 input 태그를 보면 디바이스에 따른 스타일 속성이 기본으로 적용되는데 그 중 하나가 바로 테두리이고 내부의 그림자이다.만약 사용자가 둥근 테두리를 제거하거나 그림자를 삭제하길 원하는 경우 어떻게 해야할까? 아래와 같이 다음 스타일 속성을 적용하면 된다.<style>input { -webkit-appearance: none; -webkit-border-radius: 0;}</style>appearance css속성은 적용된 그림자 또는 기타 디폴트(default) 스타일 속성을 임의로 제거 또는 설정 가능하도록 해준다. 그리고 border-radius의 경우 테두리를 제거할 수 있다.
2016-03-22 12:14:50아래는 효과적인 라디오 버튼을 생성하기 위한 방법과 이미지, CSS, 자바스크립트의 모든 방법에 대하여 정리한 내용입니다. 주요 내용은 아래와 같습니다.1. 라디오 버튼 생성을 위한 html 코드2. 라디오 버튼 css 스타일 코드3. 라디오 버튼 구현을 위한 자바스크립트 인터렉션아래 소스의 특징으로는 라디오 버튼 스타일의 커스터마이징 부분입니다. 브라우저 디폴트 디자인을 사용하지 않고 label 태그를 사용하였으며 라디오 버튼의 아이콘을 다르게 변경하였습니다. 라디오 버튼(Radio Button) 이미지의 소스 코드는 아래 링크를 참고해주세요.참고로 아래 코드를 구현시 생성되는 모습은 아래 스크린샷과 유사하게 나타날 것입니다.스크린샷) 구현될 라디오 버튼 이미지* 아이콘 이미지 다운받기http://webisfree.com/freeimage/?imgquery=508-radio,-button,-icon,-input,-%EB%9D%BC%EB%94%94%EC%98%A4,-%EB%B2%8
2016-01-05 15:21:44웹페이지 퍼블리싱시 입력폼을 만들 경우가 매우 많습니다. 특히 admin, cms, 백오피스 기능을 구현하는 경우 자주 사용되죠. 그 중에서도 가장 많이 만드는 태그가 바로 input 태그로 태그를 사용해 체크박스 또는 라디오 버튼을 많이 구현합니다.# 제이쿼리를 사용하여 체크박스 또는 라디오 박스 클릭 상태 변경하기만약 개발자가 프로그램을 통해 실제로 버튼을 클릭하지 않고 input 태그의 상태를 클릭하거나 하지 않은 상태로 변경하려면 어떻게해야할까요? 먼저 가장 손쉬운 방법으로 자바스크립트의 제이쿼리를 사용하는 방법이 있을 것입니다.제이쿼리의 prop() 속성을 사용하면 매우 간단하게 체크박스나 라이도 박스의 상태를 변경할 수 있습니다. prop() 속성은 attr() 속성과 매우 비슷한데 현재 속성값을 가져오거나 변경할 수 있는 매우 유용한 메소드입니다. 이를 사용해 어떻게 하면 상태값을 변경할 수 있는지 알아보세요.$(선택요소).prop('checked', true or fa
2015-12-26 15:31:32크롬 브라우저를 사용하여 input 태그등을 사용하면 나중에 페이지를 로딩할 경우 배경색이 다른 경우가 발생한다. 이런 경우는 로그인 페이지를 만들거나 기타 입력폼을 작성할 때 나타나는데 문제는 input 폼이 다수인 경우 모두 바뀌는 것이 아니라 일부만 바뀌어 이상해 보이기 때문이다.자동완성기능 속성을 off해도 백그라운드가 노란색으로 나타나는 이 스타일을 제거하기 위한 방법은 어떻게 해야하는가? background 속성을 변경해도 적용이 안되는데 그 이유는 해당 백그라운드 칼라는 box-shadow 속성과 관련이 있기 때문이다. 이를 제거하기 위해 아래의 방법을 사용해야 한다.# input 입력폼의 자동완성 백그라운드 제거 방법input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset;}구글링을 통해 확인된 방법은 위와 같이 box-shadow 색상을 다른 것으로 변경하면 가능하다. 위 소스코드의 경우 inpu
2015-12-11 13:14:35넓리 사용되는 입력폼 중 하나인 input 태그는 다양한 속성을 가지고 있습니다. 그 중에서도 사용자가 아무것도 입력하지 않았을때 팁으로 텍스트를 보여주는 속성이 바로 placeholder 속성입니다.# input 태그 placeholder 색 바꾸기이 속성은 아래와 같이 사용됩니다. 아래를 보시면 여기에 입력하세요란 텍스트가 있죠.질문: 당신의 이름은 무엇입니까?이처럼 input 태그 안에는 브라우저 디폴트값으로 색깔이 보일 수 있습니다. 즉, 브라우저의 디펜던시로 기본 컬러값이 설정되어 있는거죠. 만약 이 색상을 바꾸기 위해서는 어떻게 해야할까요? 먼저 이를 바꾸기 위해서는 pseudo 선택자를 사용해 가능합니다. 예를들면...input::-webkit-input-placeholder { color: #f00; }위의 방법은 간단하게 표현한 코드 모습니다. 만약 실제 코드로 작성한다면 웹킷(webkit) 뿐 아니라 크로스브라우징을 위해 CSS에 선언할때 아래의 속성들처럼 선언해
2015-10-23 15:53:46서버에 파일을 업로드, 올리기 위한 방법을 알아보려합니다. 만약 올릴 파일의 개수가 한개가 아닌 다수의 파일인 경우 어떻게해야 복수 파일 업로드가 가능한지 함께 알아보도록 하겠습니다.이와 함께 복수 파일의 경우 드래그앤드랍 방식의 인터페이스를 구현한다면 사용자가 더욱 편하게 업로드를 수행할 수 있을 것입니다. 만약 드래그를 구현하기 위해서 생각할 부분도 함께 알아보겠습니다. 우선 파일을 서버에 올리기위해서 화면 앞단에서느 무엇을 해야할까요?# 다수의 파일 한번에 업로드하기 위한 방법 아래에서는 파일을 웹페이지에 선택하는 것부터 서버와 통신하는 것까지 자세하게 알아보겠습니다. ! 파일 첨부가 가능한 태그와 업로드에 필요한 속성은?우리는 파일 첨부를 하기 위하여 input 태그를 사용할 것입니다. 일반적인 type의 경우 file로 설정되어 있음을 확인할 수 있습니다. 아래는 일반적인 파일 첨부를 위한 input 태그의 모습입니다.<input type="file" name="filen
2015-10-01 15:44:35익스플로러(IE)에서 input 태그의 text 속성을 가지는 입력폼을 사용하는 경우 구현된 UI의 추우측에서는 자동으로 X버튼이 생성됩니다. 이 X버튼은 텍스트를 모두 삭제하는 버튼으로 이버튼을 제거하거나 스타일을 변경하는 방법을 알아보고자 합니다. 어떻게해야할까요?# IE에서 input 태그 스타일 변경하기 이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 이때 아래와 같이 해당 엘리먼트를 선택하여 사용할 수 있습니다.input::-ms-clear { } 그렇다면 만약 입력폼에서 실제로 어떻게 사용되는지 간단한 예제를 사용해보겠습니다.! IE에 적용하는 input 태그 스타일 예제보기만약 아래와 같이 검색어를 입력받는 폼이 있는 경우 아래와 같이 사용합니다.<span>이름을 입력하세요.</span><input type="text" /><button>Enter<button>이제 위 input 태그에 보여지게될 x 버튼을 제거하기 위해 아래와 같
2015-08-11 20:04:00input 태그를 사용하여 엔터를 누를경우 자동으로 form 태그에 submit 하게 됩니다. 즉, form 태그가 가진 action 속성의 url 주소로 이동하게 되죠. 하지만 만약 엔터를 눌러도 동작 안되게 하는 방법이 있을까요? 아래는 이를 수정하여 엔터를 눌러도 아무런 동작이 안되게 하는 방법입니다.먼저 어떤 폼형식의 태그가 있다고 가정하면 일반적인 코드는 아래와 같습니다.<form id="form"> <input id="testEle" /> <button id="button">Click</button></form>여기서 잠깐... 사용자 입장에서는 엔터키를 눌러 submit()되면 더 편리하지 않나요?라고 물을 수 있습니다. 물론 맞는 말입니다.하지만 그것은 개발자가 의도하였을 경우의 말입니다. 따로 submit을 위한 버튼이 없어도 되기 때문입니다. 하지만 문제는 의도하지 않은 경우 발생합니다. 다시말해 입력된 값이 바로 submit 되는 것이 아니라 입력값에 따라
2015-04-20 19:10:03홈페이지를 구축시 입력폼에 자주 사용되는 라디오 버튼에 대하여 알아보고 만드는 방법을 함께 알아봅니다. 먼저 라디오 버튼은 어떻게 생겼을까요? 아래에서 자세히 알아보세요.# 웹사이트 구축시 입력폼 라디오 버튼이란, Radio button라디오 버튼은 동그란원 모양이마 선택 가능한 인터페이스를 가지고 있습니다. 방문자에게 입력값을 받기 위해서 웹사이트에 많이 사용됩니다. 쉽게는 연락하기 페이지나 관리자 페이지 등에서 쉽게 볼 수 있습니다. 어떻게 생겼는지는 아래의 이미지를 참고하세요. 이처럼 선택하는 버튼을 보신적 있으실겁니다.스크린샷) 사과와 바나나를 선택 가능하도록 라디오 버튼 사용바로 위의 이미지 처럼 몇 가지 값들 중 하나를 선택할 경우에 자주 사용되는 입력 양식 중 하나가 바로 라디오 버튼입니다. 라디오 버튼은 다음과 같은 특징이 있죠.! 라디오 버튼(Radio button) 사용방법 라디오 버튼은 input 태그의 type속성을 이용하며 해당 값에 radio를 입력합니다.<
2015-04-03 13:11:10input 태그의 placeholder 속성을 사용해 input 태그안에 보여지게 될 문구를 넣을 수 있습니다. 이 값은 방문자에게 어떤 정보에 대한 폼양식인지 전달할 뿐 실제 이 값이 전송되지는 않죠. 그런데 이 안에 있는 default 속성값... 예를 들어 색상이나 투명도 등을 설정하기 위해서는 어떻게 해야할까요?아래 방법처럼 CSS를 설정하여 원하는대로 스타일 지정이 가능합니다.::-webkit-input-placeholder { /* Webkit browsers */ color: #AB75AB;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #AB75AB; opacity: 1;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #AB75AB; opacity: 1;}:-ms-input-placeholder { /* Internet Explorer 10+ */
2015-03-25 13:20:09input 태그의 checkbox 속성을 사용한 값들이 하나가 아닌 여러개인 경우 이 값들이 서버에서 불러오게 된 뒤 자동으로 체크되게하려면 어떻게 해야하는지 알아보려 합니다.먼저 서버에 저장 할 경우 넘겨주는 name 값을 배열로 넘겨줍니다. 아래처럼요#1. 작성될 폼 양식<form><input name="fruit[]" type="checkbox" class="fruitValue" value="사과" />사과</span><input name="fruit[]" type="checkbox" class="fruitValue" value="배" />배</span><input name="fruit[]" type="checkbox" class="fruitValue" value="바나나" />바나나</span></form>#2. 폼을 넘겨받아 데이터베이스(DB)에 처리할 페이지; PHP를 예로 들어 설명하겠습니다.<?php$fruit = $_REQUEST['fruit'];// 넘겨 받은 값
2015-03-10 16:11:49만약 사이트를 방문하여 로그인이나 어떤 정보를 입력하려고 하는데 이미 자동으로 글이 저장되었다면? 그리고 그 내용이 보안이나 개인적인 정보라면 이 기능을 원하지 않을텐데도... 아래는 자동 완성 기능 사용하지 않는 방법입니다.[ 1 ] 자동 완성 기능은 언제 그리고 왜 사용되나...; 브라우저는 우리가 입력하는 입력폼, input이나 textarea에 입력할 글을 자동으로 저장하게 해주는 자동 완성 기능을 기본으로 가지고 있습니다. 그렇기 때문에 기존에 입력된 글을 앞에 몇글자만 입력해도 모두 입력할 수 있도록 도와줍니다. 매우 편리한 기능이지요. 하지만 이 기능이 항상 필요한 것은 아닙니다. 보안이나, 개인적인 정보일 경우 자동완성 기능은 꼭 꺼두어야 할 필요가 있습니다.[ 2 ] 자동 완성 기능 사용하지 않도록 설정; 사용할 태그에서 autocomplete 속성을 사용합니다. input 또는 textarea 태그안에 자동 완성 기능을 막는 이 속성을 넣어만 주면됩니다. 아래의 예
2014-08-29 23:57:13안녕하세요 ~ 예전에는 단문의(매우 매우 짧은...) 글을 자주 올렸는데 컨텐츠도 부족한데 글까지 부족하면 왠지 안될 것 같아서... 아무래도 인사부터 시작하면 좀 더 심의를 기울여 작성하지 않을까요?ㅎ 오늘은 비밀번호 입력을 위한 input 태그에 대해 알아보겠습니다.! 다른 input 태그와의 차이점; type 속성에 일반적으로 text를 넣지만 비밀번호는 password를 넣어줍니다. 그렇게 되면 아래처럼 패스워드가 ******표시로 보이게 되죠....<input type="text" value="test"> // input창에 test가 출력<input type="password" value="test"> // input창에 ***가 출력... 헐 끝까지 다 적었는데 다 날라갔네요... 오토 마우스 옆의 뒤로가기 버튼이 ㅠㅠ 어쨌든, 다시 적습니다;이처럼 type속성에 password를 사용하는 이유는 혹시 모를 보안상의 문제점을 보완하기 위함입니다. 혹시 뒤에 카메라가 있을
2014-07-07 23:27:12
