-
06. 폼프론트엔드/HTML 2020. 9. 1. 18:45반응형SMALL
# What? 이게 뭔데?
사용자로부터 입력을 받고 싶을 때 사용
form : 입력폼틀
input : 입력란
1) placehoder: 어떤 입력을 원하는 안내문구
2) id: 이 입력에 대한 고유 id
3) type : 입력 유형(password, checkbox, radio, text)
4) name : input명
label : 어떤 입력에 대한 라벨
* for : 어떤 입력에 대한 라벨인지 표시(해당 입력의 id값을 입력해주면 됨)
select : 옵션 선택창
* id: 이 입력에 대한 고유 id
textarea : 긴 문장 입력
# How? 어떻게 쓰는데?
<!DOCTYPE html> <!-- 이 문서가 HTML5 문서라는 뜻 --> <html lang="ko"> <!-- 웹 문서의 시작 --> <head> <!-- 웹 문서에 대한 정보를 담는 태그 --> <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 하라는 뜻 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 초기엔 1배율로 페이지를 보여주라는 뜻 --> <title>Document</title> <!-- 문서 제목 --> <link rel="stylesheet" href="./style.css"> <!-- css를 연결하는 태그 --> <script src="./common.js"></script> <!-- js를 연결하는 태그 --> </head> <body> <form action=""> <!-- 일반텍스트 입력 --> <label for="name">이름</label> <input type="text" placeholder="이름을 입력해주세요" id="name"> <br/><br/> <!-- 비밀번호 입력 --> <label for="password">패스워드</label> <input type="password" placeholder="이름을 입력해주세요" id="password"> <br/><br/> <!-- 체크박스 입력(복수선택 가능) --> <label for="banana">사과</label> <input type="checkbox" placeholder="이름을 입력해주세요" id="banana" name="favorite"> <label for="apple">바나나</label> <input type="checkbox" placeholder="이름을 입력해주세요" id="apple" name="favorite"> <br/><br/> <!-- radio 입력(단일선택만 가능 단, name을 통일시켜줘야함 주의!) --> <label for="cherry">체리</label> <input type="radio" placeholder="이름을 입력해주세요" id="cherry" name="fruits"> <label for="berry">베리</label> <input type="radio" placeholder="이름을 입력해주세요" id="berry" name="fruits"> <br/><br/> <!-- 긴 문장 입력창 --> <textarea name="" id="" cols="30" rows="10" placeholder="탈퇴사유를 입력해주세요."></textarea> <br/><br/> <!-- select 옵션 선택 --> <select name="" id=""> <option value="">선택지1</option> <option value="">선택지2</option> </select> </form> </body> </html># Practice 연습
아이디, 비밀번호, 비밀번호, 성별을 입력받는 회원가입폼 만들어보기
* 코드참고 : https://github.com/ShinHyungJune/publishing-course/tree/html-06-form
LIST'프론트엔드 > HTML' 카테고리의 다른 글
fullpage.js에서 스크롤 시 영상자동재생 멈출 때 (0) 2022.03.07 07. 시맨틱 태그 (0) 2020.09.01 05. 표 (0) 2020.09.01 04. 이미지 (0) 2020.09.01 03. 링크 달기 (0) 2020.09.01