input 3

[React] input 상태 관리하기

input 상태 관리하기 input의 onChange를 사용하면 이벤트 객체 e를 파라미터로 받아올 수 있다. 이 객체의 e.target은 이벤트가 발생한 DOM을 가리킨다. e.target.value를 조회하면 현재 input의 value값을 알 수 있다. 먼저, InputSample.js파일에 InputSample컴포넌트를 생성합니다. // InputSample.js import React, {useState} from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); // 입력하는 값이 하단 값에 나타나게 함 }; const onR..

웹개발/React 2021.07.16

[html] 폼 태그 - <form>, <fieldset>, <legend>, <label>, <input>

태그 요소 요소들을 그룹화 요소의 캡션 정의 - 의 for속성값은 결합하고자 하는 요소의 id속성값과 같아야 한다. - 결합하고자 하는 요소를 안에 위치시키면 for 속성 사용하지 않아도 된다. - 요소 사용할 수 있는 요소 : , , , , , , 입력 필드 정의 예시 ) 로그인 정보 아이디 비밀번호 연락처 정보 전화번호 이메일

웹개발/html 2021.05.25

[html] input 태그의 추가된 속성과 속성값

[ 추가된 속성 값 ] 추가된 속성 값 내용 pattern 허용하는 입력의 형태를 정규식으로 지정 required 입력양식 제출 전에 반드시 채워져 있어야 함을 표현 readonly 읽기 전용 placeholder 입력 힌트를 보여줌 autofocus 페이지 로드시 자동으로 입력 포커스를 갖음 autocomplete 자동 입력 완성 [ 추가된 input 태그의 속성 ] 1. 날짜관련 input type = "datetime" UTC 날짜와 시간 형식을 이용한 컨트롤 창 생성 input type = "datetime-local" 현지 날짜 (년월일) / 시간 input type = "week" YYYY, N번째 주 input type = "month" YYYY MM input type = "date" YY..

웹개발/html 2021.05.25