본문 바로가기
반응형

앱 만들기/HTML5 study59

Input type 연도, 월 입력 지난 시간에 이어 오늘은 연도 와 월을 입력할 수 있는 폼을 만들어 봅니다. 예제 코드 입니다. Input type 날짜 예제 만료일: 속성 id와 name 은 이 입력란을 식별하는 데 사용합니다. 결과 화면에서 달력 아이콘을 클릭하면 현재 달이 기본으로 선택됩니다. 손쉽게 연도와 월을 입력할 수 있는 타입니다. 원하는 달을 선택하면 연도와 함께 표시가 됩니다. 연도와 달 만 입력하기를 원할 때는 input type="month"를 사용하면 됩니다. 감사합니다. 2023. 4. 12.
Input type 날짜 입력 날짜를 입력받는 form 은 input type="date | month | week" 이렇게 3가지 타입이 있습니다. 오늘은 date 예제를 만들어 봅니다. Input type 날짜 예제 생년월일: 속성 id 와 name 은 이 입력란을 식별하는데 사용합니다. 결과는 하기와 같습니다. 마우스 커서로 달력 아이콘을 클릭하면 달력이 표시됩니다. 달력에서 자신이 원하는 날짜를 선택하면, 해당 날짜가 입력 필드값에 표시 됩니다. input type="date" 는 연도/월/날짜 를 입력 받을 수 있는 인풋 폼 입니다. 상황에 맞게 date type을 잘 활용하면 좋겠죠. 감사합니다. input type="date"날짜 제한 하기 input type="date"에서 입력받을 수 있는 날짜를 제한할 수 있습니다... 2023. 4. 11.
Input type="range" 예제 Input type="range" 예제입니다. 슬라이드 막대바가 나타나서 손쉽게 숫자를 입력할 수 있는 form 타입입니다. 위 결과 화면을 만들어 봅니다. 밝기: type ="range"는 슬라이드 바가 있는 숫자 입력 폼을 설정합니다. min 속성은 입력할 수 있는 최소값. max 속성은 입력할 수 있는 최댓값을 지정합니다. value는 초기값을 지정합니다. 슬라이드는 좌우로 움직일 때마다 1씩 값이 변화합니다. form 요소 중 Input type="range"에 대해서 알아보았습니다. 감사합니다. https://soo0100.tistory.com/2193 Input type="number" 예제 Input type="number" 예제입니다. 상하 스핀박스에 의해서 손쉽게 숫자를 입력할 수 있는 .. 2023. 4. 10.
Input type="number" 예제 Input type="number" 예제입니다. 상하 스핀박스에 의해서 손쉽게 숫자를 입력할 수 있는 form 타입입니다. 스핀박스는 마우스를 필드에 위치시키면 자동으로 나타납니다. 위 결과물은 하기 코드로 작성이 가능합니다. Input type="number" 예제 수량: type ="number" 숫자 입력 폼을 설정합니다. min 속성은 입력할 수 있는 최소값. max 속성은 입력할 수 있는 최댓값을 지정합니다. step 속성은 사용자가 입력할 수 있는 숫자의 증가 단위를 설정합니다. value는 초기값을 지정합니다. form 요소 중 Input type="number"에 대해서 알아보았습니다. 감사합니다. https://soo0100.tistory.com/2194 Input type="range".. 2023. 4. 9.
Input 텍스트 필드 속성 텍스트 인풋 타입의 태그에서 글자수 제한과 기본 입력 값 필드 속성에 대해서 알아봅니다. 아이디 패스워드 size : 필드의 크기를 의미하며, 화면에 보일 글자 개수를 뜻합니다. maxlength : 최대로 입력할 수 있는 글자의 수입니다. 위 예제에서는 20자 이상은 입력하지 못합니다. value : 기본적으로 화면에 보일 글자를 의미합니다. 위 코드를 실행 시 value 값에 의해서 기본 텍스트가 입력됩니다. Input 텍스트 필드 속성에 대해서 알아보았습니다. 감사합니다. 2023. 4. 8.
div 태그 란? dive 태그를 Chat GPT에게 문의해 보았습니다. 하기처럼 완벽한 답변을 얻을 수 있었습니다. 태그는 division의 약자로 '구분하다'라는 뜻입니다. div 태그는 눈으로 구별되는 효과는 없지만, 코드 내부상으로는 특정 태그들을 하나의 단위로 묶어서 관리할 수 있게 해 줍니다. 해당 코드를 실행하면 하기와 같습니다. 와 태그 이외에는 가시적인 효과는 없으나, 해당 태그들을 구조적으로 분리하여 특정 기능 및 효과를 줄수도 있습니다. 이곳은 무엇인가요? 아무것도 아니에요! 단지 구역을 구분하는 컨테이너 역할을 할 뿐입니다. 두번째 구분 영역 입니다. 아무것도 아니에요! 단지 구역을 구분하는 컨테이너 역할을 할 뿐입니다. 2개의 div 태그를 사용 시에는 위처럼 id 속성을 사용하여 각각의 영역을 구.. 2023. 3. 17.
전송,리셋 버튼 만들기 웹페이지에서 전송과 취소 버튼을 만들어 봅니다. 이름과 이메일 입력을 서버로 전송하기 위해서는 최종적으로 보내기(전송) 기능이 필요합니다. 그리고 잘 못 입력했을 경우 취소(리셋) 버튼도 필요합니다. 전송 과 취소 버튼을 만들어 봅니다. 이름: 이메일: input type = "submit" 속성은 전송 기능. 전송된 정보는 form 태그의 action 속성에서 지정한 서버 프로그램에서 실행이 됩니다. input type="reset" 속성은 취소 기능을 만들어 줍니다. 즉, 사용자가 입력한 내용을 모두 지우게 됩니다. value : 속성을 이용하여 버튼에 표시될 내용을 표현 합니다. 즉, 버튼 이름이 되겠습니다. 보내기 및 취소 기능을 하는 input type 속성 submit 와 reset 을 확인해.. 2023. 3. 16.
체크박스 예제 HTML 웹문서에서 체크박스는 사용자 입력을 받기 위한 유용한 폼입니다. 체크 박스를 만들기 위한 예제를 정리해 봅니다. 좋아하는 과일 고르기 사과 바나나 수박 귤 해당 예제를 실행하면, 하기와 같은 체크박스 폼을 얻을 수 있습니다. 체크박스는 여러 개의 항목을 선택할 수 있다는 점에서 라디오 버튼과는 차이점을 가집니다. 체크박스를 만들기 위해서는 속성이 가장 중요하며, value 속성이 꼭 들어가야 합니다. value : 서버에 실제 전송되는 값을 나타냄. 추가로, checked라는 속성을 설정하면 기본적으로 체크하고 싶은 항목을 선택할 수 있습니다. 사과 바나나 수박 귤 웹문서에서 체크박스를 표기할 수 있는 태그를 확인해 보았습니다. 감사합니다. 2023. 3. 15.
라디오 버튼 예제 사용자는 위 폼에서 하나의 과일만 선택할 수 있습니다. 이것을 라디오 버튼이라고 하며, 선택된 값은 서버로 전송되게 됩니다. 위 결과에 대한 예제를 만들어 봅니다. 좋아하는 과일 고르기 사과 바나나 수박 귤 라디오 버튼 역시 폼이기에 태그 사이에 위치를 합니다. 라디어 버튼을 만들기 위해서는 하기 속성이 중요합니다. 태그의 type ="radio" 라고 설정하기 name : 여러 개의 라디오 버튼 중 하나만 선택하기 위해서 동일한 값을 설정함. (예:fruit) value : 서버로 전송되는 실제 해당 라디오 버튼의 값. checked 속성을 추가하면 디폴트로 해당 라디오 버튼이 선택되어 나옵니다. 수박 사용자에게 입력받는 폼 중 라디오 버튼에 대해서 알아보았습니다. 감사합니다. 2023. 3. 14.
반응형

티스토리툴바