어제 오늘 내일

input 필드를 비활성화 하는 방법은 disabled 속성을 사용하는 방법과 readonly 속성을 사용하는 방법 이렇게 2가지가 있습니다. 이 두가지 속성을 사용하는 방법과 차이점을 알아보도록 하겠습니다. input 필드 비활성화 하기 (disabled, readonly 차이) 1. disabled 2. readonly 1. disabled input 필드에 disabled 속성을 사용하면, 위의 예제와 같이 input 필드가 비활성화 됩니다. input 필드의 색깔이 바뀌고, input 필드를 클릭해도 포커스가 가지 않습니다. 가장 중요한 것은, disabled 속성을 설정하면, 위의 예제와 같이 기본값이 설정되어 있더라도, submit을 수행하면 값이 전달되지 않습니다. 2. readonly in..

input 박스에서 사용자에게 숫자만 입력되도록 설정하는 방법 4가지를 소개합니다. input 박스에 숫자만 입력되도록 설정하는 4가지 방법 1. 'type'을 'number'로 지정하기 2. 입력된 keycode 체크하기 3. oninput 이벤트, 정규식, replace() 함수 활용하기 4. pattern 속성 활용하기 1. 'type'을 'number'로 지정하기 기본 예제 input의 type속성을 'number'로 지정하면, 숫자만 입력 받을 수 있습니다. 브라우저에 따라서, 입력창 오른쪽에 숫자 증감 아이콘도 생성됩니다. min, max, step 속성 지정하기 input의 type을 'number'로 지정한 경우, min, max 속성을 추가하여 최대값과 최소값을 지정할 수 있습니다. st..

필드에 입력받은 값을 화면에 출력하는 방법입니다. 사용자가 타이핑 할때마다 input 값 출력하기 See the Pen js by anna (@hianna) on CodePen. HTML 사용자로부터 값을 입력 받을, id='name'인 element를 생성하였습니다. onkeyup 이벤트(키보드가 눌려졌을 때 발생하는 이벤트)가 발생하면, printName() 메소드를 호출하도록 하였습니다. 폼에 입력받은 값을 출력할 위치입니다. Javascript function printName() { const name = document.getElementById('name').value; document.getElementById("result").innerText = name; } const name = d..

지난 번에는 사용자가 로컬에서 파일을 선택하고, 그 파일 내용을 읽어오는 방법을 알아보았습니다. [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) 웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type.. hianna.tistory.com [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) HTML/Javascrip로 로..

웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type을 'file'로 지정했을 때 추가로 사용할 수 있는 속성들에 대해서 알아보도록 하겠습니다. > "accept" 입력받을 수 있는 파일의 유형을 지정하는 속성입니다. accept 속성을 지정하지 않으면 모든 유형의 파일을 입력 받을 수 있습니다. 여러 종류의 파일을 입력받기 위해서는 아래와 같이 쉼표로 목록을 구분하여 작성합니다. See the Pen read file by anna (@hianna) on CodePen. accept 속성 값 - 확..

날짜 시간 입력 항목에 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다. 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 지난번에는 HTML의 태그를 이용하여날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보았습니다.그리고 이 항목들에 기본값을 지정하는 방법도 알아보았습니다.[IT/HTML] - [HTML] 날짜, 시간, 년도 입력받기[IT/HTML] - [HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기 이번에는 이 태그의 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다. 현재 일자, 시간을 default값으로 지정하기 위해서는Javascript를 사용해야 합니다. month 타입에 현재월 세팅하기See the Pen 20181201 by an..

이번에는 이 태그의 기본값을 지정하는 방법을 알아보도록 하겠습니다. 날짜, 시간 입력 항목 기본값 세팅하기 지난번에는 HTML의 태그를 이용하여날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보았습니다.[IT/HTML] - [HTML] 날짜, 시간, 년도 입력받기 See the Pen 20181201 by anna (@hianna) on CodePen. 기본값을 지정하기 위해서는 위와 같이 value 속성을 사용해야 합니다.그리고, 각 type별로 value 속성에 들어가야 하는 값의 형식이 정해져 있기 때문에, 이 형식을 지켜서 값을 입력해 주어야 합니다. input type별 value 값 입력 형식은 다음과 같습니다. month : 'yyyy-MM'date : 'yyyy-MM-dd't..

HMTL에서 날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보도록 하겠습니다. HTML에서 날짜, 시간, 년도 입력받기 HTML에서 사용자의 입력을 받기 위해서는 태그와 태그를 사용합니다. 태그와 태그에 대해서 잘 모른다면 먼저 아래의 포스팅을 참조하세요.[IT/HTML] - [HTML] 태그로 사용자 입력 받기 See the Pen 20181201 by anna (@hianna) on CodePen. 날짜, 시간, 년도 등 시간 관련 정보를 입력 받기 위해서는위와 같이 input 태그의 type 속성의 값을 지정해 주면 됩니다.입력 창의 오른쪽 화살표를 클릭하면 달력을 이용하여 날짜를 선택 할 수도 있습니다.시간 관련해서 type 속성으로 지정할 수 있는 값들은 아래와 같습니다. mon..

지난 번에는 태그와 태그로 체크박스를 만들고,체크박스에 선택 된 정보가 어떻게 서버로 전달되는지 알아보았습니다.[HTML] 태그로 체크박스(checkbox) 만들기 지난번에 알아본 체크박스는 사용자가 여러 개의 선택을 할 수 있었습니다.이번에는 사용자의 선택을 “하나만” 입력 받을 수 있는, 라디오버튼(radio)을 만드는 방법을 알아보도록 하겠습니다. 태그로 라디오버튼(radio) 만들기 계속해서 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보고 있습니다.text 일반 텍스트를 입력 받을 수 있습니다.password 패스워드를 입력 받을 수 있도록, 입력 값이 화면에 보여지지 않도록 합니다.submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다.button 버튼을 생성해 줍니다.check..

지난 번에는 태그와 태그로 입력받은 데이터를 서버로 전송하는 버튼을 만드는 방법을 알아보았습니다.[HTML] 입력받은 데이터 서버로 전송하기 - submit 이번에는 입력 받은 데이터를 서버로 전송하지 않고, 다른 스크립트를 실행할 수 있는 버튼을 만드는 방법을 알아보도록 하겠습니다. 태그로 버튼(button) 생성하기지난번 포스팅에서 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보았습니다.text 일반 텍스트를 입력받을 수 있습니다.password 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다.submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다.button 버튼을 생성해 줍니다.checkbox 체크박스 형태의 입력을 받을 수 있습니다.radio 라디오 버튼 형..