[ HTML ] form 태그

form 태그

• 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 모음
• 사용자가 입력한 데이터를 서버로 보낼 때 사용

  <form method='전송방법' action='데이터를 받을 서버페이지'>
    ....
  </form>

전송방법
get : url에 데이터를 포함하여 전달하는 방법
post : 데이터를 body에 포함하여 전달하는 방법

# 데이터를 받을 페이지 : "./regist" / 전송방법 : method="post"
<form action="./regist" method="post">

        # 아이디와 비밀번호를 입력하는 입력창 생성
        # maxlength : 최대 글자 수
        # placeholder : 공백일 때 표시하는 부분
        <p>아이디 : <input type="text" maxlength="20" placeholder="아이디를 입력하세요." name="userid" id="userid"></p>
        <p>비밀번호 : <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요." name="userpw" id="userpw"></p>

        # radio : 체크버튼 생성 ( 중복불가 )
        # <label></labe> 문자열을 선택해도 체크버튼에 체크가 되도록 확대
        <p>성별 :
            <label for="male">남자</label>
            <input type="radio" name="gender" value="남자" id="male" checked>
            <label for="female">여자</label>
            <input type="radio" name="gender" value="여자" id="female">
        </p>

        # checkbox : 체크박스 생성 ( 중복가능 )
        <p>취미 : 
            <label for="hobby1">운동</label>
            <input type="checkbox" name="hobby" value="운동" id="hobby1">
            <label for="hobby2">게임</label>
            <input type="checkbox" name="hobby" value="게임" id="hobby2">
            <label for="hobby3">영화감상</label>
            <input type="checkbox" name="hobby" value="영화감상" id="hobby3">
            <label for="hobby4">낚시</label>
            <input type="checkbox" name="hobby" value="낚시" id="hobby4">
            <label for="hobby5">음악감상</label>
            <input type="checkbox" name="hobby" value="음악감상" id="hobby5">
        </p>

        # 파일 첨부하기 기능
        <p>
            첨부파일 : <input type="file">
        </p>

        # 선택지창을 생성
        <p>
            직업 : 
            <select name="job">
                <option value="프로그래머">프로그래머</option>
                <option value="공무원">공무원</option>
                <option value="전문직">전문직</option>
                <option value="취준생">취준생</option>
                <option value="학생">학생</option>
                <option value="주부">주부</option>
            </select>
        </p>

        # 텍스트를 작성할 수 있는 글쓰기란 생성
        <p>자기소개</p>
        <p><textarea name="content" id="" cols="30" rows="10"></textarea></p>


        <p>이메일 : <input type="email"></p>
        <p>웹사이트 : <input type="url"></p>    

        # 모바일 전용 
        <p>전화번호 : <input type="tel"></p> <!-- 모바일에서 숫자키패드가 뜨게 함 -->

        # date : 달력을 표시 및 날짜 선택
        <p>생년월일 : <input type="date"></p>

        # min 최소값 / max 최대값 / step : 숫자간격
        <p>좋아하는 숫자 : <input type="number" min="1" max="100" step="1"></p>

        # 게이지 스크롤 생성
        <p>프로그래밍 능력 : <input type="range" min="1" max="10" value="3"></p>

        # 버튼생성
        <p><input type="button" value="버튼" onclick="alert('안녕하세요!')">
        <input type="reset" value="리셋">
        <input type="submit" value="전송">
        </p>  
        <p><button type="button">버튼</button></p>