007_입력 양식

입력 양식

• 입력 양식을 만드는 태그는 <form></form> 이다.

• 다양한 속성을 가지고 있다. → action : 데이터의 전송 대상 페이지를 지정 method : 데이터 전송 방법을 지정 (주로 get, post 사용) name : 입력 양식의 이름 지정 → <form action=”example.php” method=”post” name=”contact-form”></form>

• 입력 양식은 “block”의 속성을 가진다.

입력 양식의 다양한 속성과 설명

한 줄 텍스트 입력 란 (<input type=”text”>)

• placeholde : 입력란에 미리 텍스트를 입력

• text : 기본적인 텍스트(초기값)

• search : 검색 전용 텍스트

• email : 메일 주소

• tel : 전화번호

• url : 웹 사이트의 URL

라디오 버튼을 만드는 (<input type =”radio”>)

• name : 라디오 버튼의 이름

• value : 전송될 선택지의 값

• checked : 처음부터 선택돼 있게 하고 싶을 때 지정

체크 박스를 만드는 (<input type =”checkbox”>)

• name : 체크 박스의 이름

• value : 전송될 선택지의 값

• checked : 처음부터 선택돼 있게 하고 싶을 때 지정

전송 버튼을 만드는 (<input type=”submit”>)

• name : 버튼의 이름

• value : 버튼에 출력되는 글자

버튼에 이미지를 사용하고 싶은 경우

• name : 버튼의 이름

• src : 버튼에 사용하고 싶은 이미지 파일의 경로, 파일 이름

• alt : 이미지를 설명하는 글자

선택 박스를 만드는 (<select> + <option>)

여러 줄 텍스트 입력란 (<textarea></textarea>)

• placeholder 속성 지정

입력 양식의 레이블을 만드는 (<label>)

입력 양식 코드

• 입력 양식 타입에 따른 사용 코드

<form action="example.php" method="psot" name="contact-form">
        이름 : <input type="text" placeholder="이름">

        <dir></dir>
        성별 :
        <input type="radio" name="gender" value="남자"> 남자
        <input type="radio" name="gender" value="여자" checked> 여자
        <input type="radio" name="gender" value="그 외"> 그 외

        <dir></dir>
        좋아하는 색
        <input type="checkbox" name="color" value="붉은색" checked> 붉은색
        <input type="checkbox" name="color" value="파란색"> 파란색
        <input type="checkbox" name="color" value="노란색"> 노란색
        <input type="checkbox" name="color" value="초록색"> 초록색

        <dir></dir>
        혈액형
        <select name="bloodtype">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="O">O</option>
            <option value="AB">AB</option>
        </select>

        <dir></dir>
        <input type="checkbox" name="travel" value="국내" id="korea">
        <label for="korea">국내</label>
        <input type="checkbox" name="travel" value="유럽" id="europe">
        <label for="europe">유럽</label>
        <input type="checkbox" name="travel" value="동남아시아" id="asia">
        <label for="asia">동남아시아</label>

        <dir></dir>
        <textarea name="message" placeholder="메시지 입력"></textarea>

        <dir></dir>
        <input type="submit" value="전송">
        
        <dir></dir>
        <input width="50" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIexREAiqC27cMMlFoZpyRwBFDqK_ouy0vNQ&usqp=CAU" alt="전송">
</form>

출력 결과