# radio
[React] Error: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field.
위 코드에서 디폴트로 완결을 체크하고싶었는데 아래와 같은 에러가 발생했다. > react-dom.development.js:86 Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. at input 해당 경고메시지는 `요소에 checked`props를 제공했지만, onChange 핸들러가 없는 경우에 나타나며, checked는 값을 변경하지 않으므로 읽기 전용 필드로 렌더링 됨. 해결 방법은 onChange핸들러를 추가거나 defaultChecked를 사용하면 됨 위 코드처럼 `de
VS code-JQuery
addClass 복습 본문 inputScore input으로 입력칸 만들어주기 value값 조건 계산 sum은 int로만 계산하기 때문에 String인 문자들을 변환해줘야함 본문 배열 난수 난수주기 본문 rgb 난수 js 파일 따로 만들면 link해줘야함 방법 2가지 공통 방법1 방법2 js 본문 selector first-child $("ol li:first").css("background-color","gray"); //전체 첫번째 li contains() ()안 값을 찾아서 odd/even odd - li의 홀수번지를 찾아서 border지정 (지정인덱스로는 1,3,5.....) even - //li의 짝수번지를 찾아서 border지정 본문 copy 방법1 방법2 remove() empty 주의점 확인
0719
Return False return;은 반환 값을 돌려주는 기능 외에 해당 함수를 빠져나가는 기능도 있음 함수 탈출 기능으로서의 return;은 return false;와 같음 Name on Tag 아래의 선택지를 만들기 위한 코드 <form>과 <input>, <select>태그에 name 부여 (radio와 checkbox는 각각 name 전부 동일) 생성된 버튼이 클릭 되면(onclick) writeInfo( )라는 함수 실행 취미는 중복 가능(checkbox), 거주지와 연령대는 중복 불가(radio, select) 아래 3개의 코드는 이어지는 하나의 코드임 checkbox는 중복이 가능하기 때문에 코드 작성 시 boo
0717
Input Types Radio & Checkbox radio는 중복 불가, checkbox는 중복 가능 모든 선택 툴은 하나의 데이터(<td>)로 표현 하나의 데이터(<td>)에 들어가는 선택지는 name 속성이 모두 동일해야 함 File & Color file 타입은 이미지 파일, color 타입은 원하는 색을 선택하는 선택 툴 radio와 checkbox를 제외한 선택 툴에서 value 속성은 default 값을 의미 Number & Date number 타입은 숫자를 입력 혹은 선택하는 선택 툴, date는 날짜를 선택 number 타입에서는 max, min으로 최대 최소 값을 지정 가능하며, step 속성으로 선택하는 숫자 값의 간격을 조정 가능 value 속성은 defalut 값 의미 Select select는 input 타입이 아님 <option>태그로
[JavaScript] DOM 객체로 HTML의 다양한 폼 태그 요소 다루기 (TweeksStudy:0)
0713 > - 텍스트 필드의 값 다루기 선택 목록 다루기 라디오 버튼 다루기 체크 상자 다루기 안녕하세요! 트윅스스터디 그 다섯번째 과제인 DOM 객체로 HTML의 다양한 폼 태그 요소 다루기에서는 다양한 폼 태그의 요소를 다뤄보도록 하겠습니다. 🧁 1. 실습 준비 실습 전 주어진 소스 코드를 복사 붙여넣기하여 파일 두 개를 준비하겠습니다. 소스코드 출처 demo.html html 파일을 실행시키면 위와 같은 실행결과가 나옵니다. 코드로 구현한 부분은 다음과 같습니다. label : 텍스트(이메일 주소 : ) input type="text" : 입력창(
HTML Forms
HTML Forms > HTML ``은 유저의 입력을 수집하는 데 쓰이고 대부분 서버 상으로 전송된다. `` 요소 ` 요소는 유저의 다양한 입력을 받는 ` 요소를 위한 컨테이너라고 생각하면 된다. `요소내 `은 자동으로 서버에 데이터를 보낸다. `` 요소 `` 말 그대로 텍스트를 입력하는 한줄의 필드이다. type 속성이 생략되었을 경우, 기본적으로 type="text"로 처리된다 . 예를 들면, `와 `는 동일한 의미를 갖는다 `<input
Thymeleaf 와 Enum 클래스를 사용해서, html radio 태그 제어
보고 배운 블로그 : taegyunwoo.github.io Lombok과 Thymeleaf 의존성을 추가한 상태라는 가정하에 진행 ✏️ Enum 클래스 정의 AnimalType Enum이 포함된 데이터 객체 생성 AnimalDto Controller 작성 ZooController @ModelAttribute 에 대해 자세히 알려주는 블로그 : developer-joe.tistory html 작성 zoo.html 1 . form 태그에 th:object="${변수명}" 을 작성해준다. 2 . div 태그에 th:each="type : ${데이터 정의 list}"를 작성해준다. th
name은 데이터 전달 위한 변수, value는 화면(view)에 출력되는 값
name을 통해 사용자가 선택한 값이 전달되고, 그 값은 value로 화면(view)에 나타난다.
React 라디오 버튼 사용하기
프로젝트 진행중 카테고리에서 두개의 옵션중 하나만 셀렉할수있게 구현하고싶었다. 원래는 버튼으로 생성했으나 취지에 맞게 라디오 버튼으로 변경했다. 버튼으로 생성한 코드 두개의 버튼에 두가지 함수를 넣고 스테이트 값 변경을 주었다. 라디오로 생성한 코드 두개의 라디오 인풋에 value로 숫자를 줌으로써 원래 값을 변경해주는 함수 두개를 하나로 줄였다.
React에서 radio Input 사용하기
화면 미리보기 코드 작성 -- MapShortCut.js 코드 작성 -- MapShortCut.css > 라디오 버튼 부분 : function PersonSelect 값을 입력하는 부분 : function PersonHeight > input이 여러개일때 값을 여러개 받아서 대입하는 부분 참고한 벨로그 : [[React]여러개의 input 상태 관리하기](https://velog.io/@sunkim/React%EC%97%90%EC%84%9C-%EC%97%AC%EB%9F%AC%EA%B0%9C%EC%9D%9
심화 학습 3
학습 목표 : 키오스크 만들기 #3 > -HTML 태그에 class 선택자를 부여할 수 있다. -input 태그에 type 속성을 상황에 맞게 적용할 수 있다. -웹페이지에 입력되어 있는 값을 CSS 속성값을 활용하여 디자인을 변경할 수 있다. -(advanced) 검색을 통해 다양한 CSS 속성을 알아보고 활용할 수 있다. 주문 내역 전송하기 > 여러 데이터를 한 번에 담기 위해 '객체'를 이용하여 선택한 옵션을 저장한다. // 함수는 4개의 인자를 받으며, 순서대로 '메뉴, 사이즈, 얼음, 수량' 정보가 들어오게 된다. // 객체 안에 직접 작성해도 되고, dot notation을 활용해서 채워도 된다. 👇 // Dot notation을 사용했을 때, 
심화 학습 2
학습 목표 : 키오스크 만들기 #2 > -HTML 태그에 class 선택자를 부여할 수 있다. -input 태그에 type 속성을 상황에 맞게 적용할 수 있다. -웹페이지에 입력되어 있는 값을 CSS 속성값을 활용하여 디자인을 변경할 수 있다. -(advanced) 검색을 통해 다양한 CSS 속성을 알아보고 활용할 수 있다. 적절한 태그 속성 적용하기 > input 태그를 사용하여 웹페이지 상에 원하는 값을 입력한다. // input 태그의 기본형 = 내부에 텍스트를 입력할 수 있는 직사각형의 입력창 // input 태그의 type : radio = 여러 옵션 중에 하나만 선택할 수 있도록 하는 기능 name 속성을 설정하지 않으면, 그룹으로 인식되지 않아서 모든 옵션이 선택 가능해진다. 따라서 여러 옵션 중에 하나만 선택될 수 있게 하는 radio 타입이 적절하게 사용되지 않은 상황 ex) <input
심화 학습 1
학습 목표 : 키오스크 만들기 #1 > -HTML 태그에 class 선택자를 부여할 수 있다. -input 태그에 type 속성을 상황에 맞게 적용할 수 있다. -웹페이지에 입력되어 있는 값을 CSS 속성값을 활용하여 디자인을 변경할 수 있다. -(advanced) 검색을 통해 다양한 CSS 속성을 알아보고 활용할 수 있다. 키오스크 레이아웃 만들기 >-화면을 구성하는 요소들의 자리를 만들어 주는 작업으로, HTML/CSS를 학습할 때 했던 작업과 동일하다. >-태그에 클래스를 연결해 주는 작업이지만, HTML/CSS와 다르게 상위 영역에서 하위 영역 순서대로 진행해야 한다. menu 안에는 클래스 이름이 'menu_image'인 div태그와 클래스 이름이 'menu_name'인 div 태그인 두 개의 하위태그가 있다. // 클래스 이름이 'menu_image'인 div 태그 클래스 이름이 'menu_image'인 div 태그에는
Enum 을 활용한 라디오 버튼
🔗 요구사항 확인하기 ✏️ Radio 버튼 구현 📍 Controller 계층 enum 에 선언한 data 들을 배열로 변경해 model 로 넘겨준다. 📍 Web 계층 - add item 🔗 멀티 체크박스 멀티 체크박스와 거희 비슷하다. th:field entity 의 필드 th:value enum 의 배열 th:text enum 에 설정했던 discription 📍 소스 확인 멀티 체크박스와 거의 비슷하다. value 에 enum 값이 입력됬고, labal text 때문에 enum 의 discription 이 입력됬다. radio 버튼은 히든 필드를 생성하지 않는다. 📍 log
230316 스물 한 번째 수업_HTML
\*자동완성 벗어날 때 ctrl + spacebar 하면 선택됨 하이퍼링크: 하이퍼링크 기능은 웹 문서의 가장 핵심 클릭을 통해 연결된 웹으로 이동하여 사용을 편리하게 함 텍스트를 클릭하여 링크로 이동하는 방법, 이미지를 클릭하여 링크로 이동하는 방법, 현재 페이지 내에서 링크로 이동하는 방법 a태그는 href 태그가 반드시 쌍으로 같이 써줘야 됨 화면에는 링크표시 문구만 보여짐 img에서 src를 꼭 써줘야 이미지가 보여지는 것처럼 a에서는 href를 꼭 써줘야함 폼(form) 태그: 서
[NextJs] input type='radio', peer( peer-checked, tailwindcss)
input type='radio', peer( peer) peer peer 은 자신의 바로 다음에 올 태그에 효과를 부여한다. input type="radio" 를 사용할 때 input 의 체크버튼을 숨기기 위해 label 태그로 input, span 을 묶어준다. 이 때, input 에 className 에 peer 을 주어 바로 다음 태그인 span 의 className 에 peer-checked: 로 효과를 주어 radio 가 check 상태일 경우의 css 를 적용 시킨다.
[컴포넌트] Custom 라디오 버튼 컴포넌트
1. css로 custom한 Radio Button 컴포넌트 > 🚫 문제 - 디자인이 되어있는 Radio Button 컴포넌트 제작 👉 code는 open sandBox를 확인하면 볼수있습니다. !codesandbox[radio-yf7g7o?fontsize=14&hidenavigation=1&theme=dark] 💡 문제해결 일반 컴포넌트로 진행하다가 formik으로 데이터를 처리할 예정이었기 떄문에 formik을 통해서 컴포넌트를 만들었습니다. Field는 자동으로 입력을 Formik에 연결을 하기때문에 Provider의 formik데이터를 관리해줍니다. html에서는 기본적으로 input요소가 되기에 FormikProvider와 Field를 통해서
라디오 버튼
라디오 버튼 라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 라디오 버튼을 자바 ENUM을 활용해서 개발해 보자 상품 종류 도서, 식품, 기타 라디오 버튼으로 하나만 선택할 수 있다. FormItemController - 추가 itemTypes를 등록 폼,조회, 수정 폼에서 모두 사용하므로 @ModelAttribute의 특별한 사용법을 적용하자. ItemType.values()를 사용하면 해당 ENUM의 모든 정보를 배열로 반환한다. ex) [BOOK,FOOD,ETC] addForm.html - 추가 실행 결과, 폼 전송 로그 추가 실행 로그 체크 박스는 수정시 체크를 해제하면 아무 값도 넘어가지 않기 때문에, 별도의 히든 필드로 이런 문제를 해결했다. 라디오 버튼은 이미 선택이 되어 있다면, 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크 박스와 달리 별도의 히든 필드를