안녕하세요! 오늘부터는 포스팅에 앞서서 항상 인사를 먼저 드리고 글을 작성하려고 합니다^^ 최근 여러 사유로 포스팅을 올리지 못했는데요 ~ 앞으로는 좀 더 자주 올릴 수 있도록 노력할테니 지금처럼 많은 관심 부탁 드립니다. 그럼 계속해서 작성해 볼께요!# HTML input 태그에서 maxlength 사용하기, 문자열 최대 길이 설정입력폼에서 가장 많이 사용되는 input 태그 ~ input 태그를 사용하여 방문자로 부터 여러 정보를 입력 받아 서버에 전송 받을 수 있습니다. 이 때 input 태그에 사용되는 여러 가지 어트리뷰트가 존재하는데요 ~ 여기서 최대 길이를...
다양한 글을 올리는 웹이즈프리입니다 ~ 이전 글들을 확인해보니 input 태그를 사용하는 경우 한글 입력을 막는 방법이 없더군요~ 이와 관련하여 input 사용시 한글 입력을 막는 방법과 효과적인 방법은 없는지 알아보았습니다."Input 태그 입력폼에서 한글 입력을 막으려면?"# input 태그에 한글 입력을 막는 방법제목은 한글 입력만을 막는 방법이지만 코드를 조금만 수정하면 input 태그에 원하는 텍스트만 입력하는 방법이 되겠습니다. 일단 한글이나 기타 특정 언어를 막는 경우는 언제일까요?@ 한글이나 기타 특정 텍스트 입력을 막는 경우는 언제일까?여러가지가 있...
React UI 라이브러리 antd의 컴포넌트 중 하나인 Input에 대하여 알아봅니다.<Input />antd의 Input 컴포넌트는 html의 input 엘리먼트처럼 사용자의 입력을 받아 동작하는 인터렉션 구현시 사용할 수 있습니다. 아래는 Input 컴포넌트의 자세한 사용 방법과 property 및 예제를 함께 알아봅니다.# antd의 Input 컴포넌트 정보 알아보기Antd 컴포넌트 중 하나인 Input 컴포넌트는 방문자의 입력폼 요소 중 하나로 문자열을 등의 입력값을 전달 받아 서버에 전송하는 등 여러 작업을 수행할 수 있습니다.아래는 Input...
입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다. 어떻게 하면 가능할까요?# input 태그 엔터 submit 방지하는 방법input 태그에 엔터를 입력하면 값이 전송되는 기능은 어떻게 보면 매우 편리합니다. 하지만 입력 값을 검증하거나 이전에 다른 함수, 기능이 실행되야하는 경우 이를 방지해야하는데요 ~~ 이 때 몇 가지 방법이 존재합니다. 하나씩 알아보겠습니다.i. form 태그를 제거하기먼저 input 태그의 wrapper 태그로 fo...
파일 업로드시 input 태그를 많이 사용input 태그 accept 속성 사용하는 방법은?<input accept="image/*" /><input accept="video/*" /><input accept="audio/*" /><input accept=".txt, .doc, .docx" />accept 속성값으로 아래와 같이 사용 가능합니다.media_typeextension nameimage/*, video/*, audio/*UI에서 바로 해당 파일 목혹만 접근해주는 장점이 있음. 예를들어 이미지로 설정된 경우 탐색기 ...
검색페이지 초성으로 검색하기 구현하는 방법...
입력폼을 구성하는 다양한 요소들 중 input 태그의 체크박스나 라디오 버튼 등이 많이 사용되죠. 이런 요소들은 다양한 선택 요소들 중 방문자로부터 선택 값을 얻을 수 있는 편리한 인터페이스를 제공하고 있습니다. 이런 입력폼을 label 태그와 함께 사용하면 원하는 input 태그 등의 입력폼을 체크하거나 언체크 등의 행동이 가능합니다.label 태그는 다양한 형태로 활용될 수 있으며 아래는 퍼블리싱 단계에서 다양한 방법으로 활용이 가능한 label 태그의 쓰임에 대하여 정리한 내용입니다. 다양한 상황에서 활용되는 label 태그의 쓰임을 알아보세요.# la...
사용자가 입력한 값을 서버에 전달하기 위한 입력 양식으로 텍스트 타입이 아닌 숫자타입인 경우가 있습니다. 예를들어 가입월 또는 일등을 나타낼때 숫자로 입력받게 합니다. 이런 경우 input 태그의 type 속성을 사용하는데 text가 아닌 number를 지정하여 값을 얻는 방법에 대하여 알아보려 합니다. 간단한 코드 모습은 아래와 같습니다.<input type="number" value="" />! type을 넘버로 지정할 경우 장점타입 설정을 text가 아닌 number로 입력할 경우 어떤 장점이 있을 수 있는지 알아보겠습니다.1. 숫자만 입력받는데 용이...
웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한다면 더욱 편리하게 관리할 수 있을 것이다. 이에 html에는 fieldset이라는 태그가 존재하며 이 태그를 사용할 경우 다수의 입력폼들을 그룹화하여 관리 및 콘트롤할 수 있다. 그럼 아래에서 좀 더 자세한 내용을 확인해보자.! fieldset 태그 알아보기fieldset 태그는 아래와 같은 몇 개의 속성들을 지정하여 사용할 수 있으며 각각의 속성들의 특...
오늘 알아볼 내용은 입력폼 중 하나인 input 태그가 체크박스 또는 라디오 타입으로 어떤 값을 가지고 있을때 이를 체크하였는지 확인할 수 있는 다양한 방법에 대하여 알아보고자 한다. 방문자가 이를 클릭했을경우 이를 불러오기 위한 방법은 어떤 것이 있을까?우선 순수 자바스크립트의 방법을 알아보고 제이쿼리를 활용했을때의 방법도 알아볼 것이다. 먼저 자바스크립트를 사용한 방법을 예제와 함께 자세하게 알아보자.빨간 라인이 방문자가 클릭가능한 라디오 버튼이다.아래 방법은 순수 자바스크립트 방법을 사용한 방법이다. 사실 최근에는 제이쿼리나 기타 라이브러리를 활용하기 때문에 이...