[WEB] 04. HTML Forms

HTML Form

이 태그는 일반적으로 사용자가 입력하거나 선택한 정보를 서버로 전송하기 위해서 사용한다.

아래와 같이 회원 정보나 로그인 정보 등을 입력 받을 때에 사용한다.

 

 

---

[Form Tag]

 

1. Input 태그의 속성

type	태그의 형태 설정
name	태그의 이름 지정
readonly	수정 불가. 읽기 전용
maxlength	최대 글자 수 지정.
required	반드시 입력해야하는 태그 지정.  입력하지 않을 시 에러 메시지 출력
autofocus	페이지가 로딩될 시에 지정된 포커스로 이동.
placeholder	입력할 값에 대한 힌트 출력.

 

type의 종류

• text

        <h1>TEXT</h1>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname">
        

• password

        <h1>PASSWORD</h1>
        <label for="uid">User ID</label><br>
        <input type="text" id="uid" name="uid" required placeholder="user id"><br>
        <label for="upw">Password</label><br>
        <input type="password" name="upw"></input><br>
        

• radio

        <h1>RADIO</h1>
        male<input type = "radio" name = "gender" />
        female<input type = "radio" name = "gender" />
        

• checkbox

        <h1>CHECKBOX</h1>
        <p><b>Check</b></p>
        check1<input type = "checkbox" name = "checkbox1" />
        check2<input type = "checkbox" name = "checkbox2" />
        check3<input type = "checkbox" name = "checkbox3" />
        

• file

        <h1>FILE</h1>
        <b>Input file</b> : <input type = "file" name = "file" accept=".gif,.jpg,.png"/>
        

• submit & reset

        <h1>SUBMIT & RESET</h1>
        <br><br>
        <input type = "submit" value = "submit"/>
        <input type = "reset" value = "reset"/>
        

• button

        <h1>BUTTON</h1>
        <input type="button" onclick="alert('Clinked...!')" value="Click!!">
        

 

 

위 실습 과정 링크

http://hbweb.dothome.co.kr/2020Webcamp/html_ex4.html

html_ex4