본문 바로가기

반응형
HTML
반응형
5

[HTML&JQUERY] 이메일 형식 입력하는 방법 & 유효성 검사 (영상 有) 안녕하세요. HTML 과 JQUERY를 이용하여 이메일 형식만 입력할 수 있는 방법과 이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다. 흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다. 오직 이메일 형식의 숫자 및 영문만 입력됩니다. 아래는 구현된 이메일형식의 영상이며, 이메일형식이 틀리게 입력할 경우 경고 메세지가 나오게 됩니다. HTML INPUT 두개를 만들어 아이디와 도메인이 입력될 수 있도록하고 select박스를 이용하여 도메인 선택란을 만들어줍니다. 그리고 onclick을 이용해서 선택한 도메인이 도메인 input에 입력될 수 있도록 함수를 만들어줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 이메일 * @ -선택- naver.com g.. 2020. 12. 1.
[Jquery] 라디오 버튼 동의/미동의 기능 구현 (영상 有) 사이트를 만들다 보면 동의서에 대한 동의/미동의 기능을 구현할 경우가 종종있습니다. 제이쿼리를 통해 제가 알고 있는 두가지 방법을 공유해드리니 도움되셨으면 좋겠습니다. 첫번째는 한개 항목의 라디오 버튼 / 두번째는 다중 항목의 라디오 버튼의 정리 내용 입니다. 전체동의버튼 기능도 추가하였습니다. 첫번째! 한개의 항목에 대한 라디오버튼 처리입니다. 아래 화면과 같이 하나의 라디오 버튼을 가지고 동의/미동의 기능 구현 입니다. 요약하자면 함수를 부르는 onclick 값에 obj값을 넣어서 obj값이 Y 또는 N 일때 if문을 통해 값을 구하는 것입니다. Y일 경우 check가 되어 있다면 form문의 action 주소로 넘어갑니다. 최종 완료 화면입니다. JSP 1 2 3 4 5 6 7 8 9 10 내용내용.. 2020. 10. 2.
[HTML] HTML 개념 정리 오늘은 HTML에 대한 개념 정리 글을 작성해보려합니다. 보통 프론트엔드 개발자라면 HTML를 언어로 생각하지 않거나 등한시하는 경우가 대부분인데요. 은근히 에러가 발생되는 부분 또한 HTML 부분일 가능성도 있고, HTML를 중요시하는 개발자가 점점 늘어나는 추세입니다. 개발자라 할지라도 HTML를 꾸준히 배워할 필요성이 있는 것 같습니다... (저도 많이 혼나는 중이라 겸사겸사해서 정리해보았습니다 ㅜㅜ) 혹시 틀린 부분이나 고칠 부분에 대해 댓글 부탁 드립니다~ HTML (HyperText Markup Language) : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 Markup : Tag를 사용해 문서에서 어느 부분이 제목이고 본문인지 어느 부분이 사진이고 링크인지 표시 HyperText .. 2020. 4. 13.
[HTML&JQUERY & SPRING] 버튼 클릭 시, 숫자 증감/감소 기능 안녕하세요. 버튼을 클릭할 경우에 숫자가 증가하고 감소하는 기능을 구현하려 합니다. (코드를 재수정하였습니다.2020년 12월) 화면 부분부터 보면.. HTML 부분입니다. 1 2 3 4 5 6 7 8 9 수량 7 + - Colored by Color Scripter cs button onclick 속성에 값을 넣어주고 this 를 넣어 자기 자신 값을 부여합니다. 또한 p와 m을 넣어줘서 type을 구분할 수 있도록 합니다. input 에서는 디비와 연동할 수 있도록 name 값을 넣어줍니다. 다음은 SCRIPT 부분입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 function fnCalCount(type, ths){ var $input = $(ths).parents("td").find.. 2020. 2. 28.
[HTML&JQUERY] 리스트 삭제 버튼 구현 안녕하세요. 버튼을 통해서 행을 지우는 방법에 대해 알아보겠습니다. 보통의 HTML 리스트 형태는 아래와 같습니다. (코드를 재수정하였습니다 2020년 12월) 리스트 항목을 삭제하기 위해서는 마지막 항목에 삭제 버튼을 넣어준 뒤, 제이쿼리를 이용해 선택 행을 지우는 작업이 필요합니다. HTML tbody 안에 button 태그를 입력한 후에 함수에서 받을 수 있도록 onclick 속성에 값을 입력한다. 이때 자신을 선택하도록 (this)를 넣어줍니다. 1 2 3 4 5 6 7 8 9 10 11 수량 + - X Colored by Color Scripter cs SCRIPT 스크립트 부분에서 onclick 값을 선언한 후에 행을 지우기 위해 부모값 ("tr")을 선언한 후, remove를 작성하면 완료가.. 2020. 2. 26.