개발나라 스용공주

[교재] HTML 왕기초 22장 - Visual Studio Code / 폼(form) 양식 만들기 본문

WEB/HTML & CSS

[교재] HTML 왕기초 22장 - Visual Studio Code / 폼(form) 양식 만들기

스용공주 2024. 7. 3. 20:49
728x90
728x90

아래 사진과 같이 폼 양식을 만드는 코드이다.

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
        </style>
    </head>
    <body>
        <form>
            아이디 : <input type = 'text'> <br>
            비밀번호 : <input type = 'password'><br>
            성별 : <input type = 'radio'>남자 <input type = 'radio'>여자<br>
            가입 출처 : <input type = 'checkbox'>SNS <input type = 'checkbox'>광고 <input type = 'checkbox'> 지인 추천<br>
            가입 양식 PDF : <input type = 'file'><br>
            이메일 : <input type = 'text'> @ <select><option>naver.com</option><option>gmail.com</option></select>
            <br>
            <br>
            가입 소감 : <textarea rows="5" cols="30"></textarea> ,<br>
            <button>제출</button>
        </form>
    </body>
</html>

 

 

 

 

[ 아이디와 비밀번호 ]

아래 사진과 같이 <input type>을 text로 하게 되면 일반적인 아이디를 작성하는 것과 같이 글자 그대로 작성되고 password로 할 경우 비밀번호 작성할 때처럼 작성한 글자가 가려지게 된다.

아이디 : <input type = 'text'> <br>
비밀번호 : <input type = 'password'><br>

 

 

 

 

 

[ 선택 박스 ]

아래 사진과 같이 <select>을 사용하여 선택지를 제공하고 선택지는 <option>을 통해 만들어 줄 수 있다.

이메일 : <input type = 'text'> @ <select><option>naver.com</option><option>gmail.com</option></select>

 

 

 

 

 

[ 다중 입력 창 ]

<texrarea>를 통해 가로(rows) 세로(cols) 줄의 사이즈를 지정해주고 글 작성 공간을 만들어줄 수 있다.

가입 소감 : <textarea rows="5" cols="30"></textarea>

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML] table에서 칸 병합하기 / colspan, rowspan  (0) 2024.07.12
[HTML] 일기예보 만들기 예제 실습  (0) 2024.07.12
[교재] HTML 왕기초 21장 - Visual Studio Code / 표 만들기  (1) 2024.07.03
[생활코딩] CSS 왕기초 20장 - Visual Studio Code / link로 css 파일 따로 관리하기  (0) 2024.07.02
[생활코딩] CSS 왕기초 19장 - Visual Studio Code / 반응형 웹 디자인 실습  (0) 2024.06.30
'WEB/HTML & CSS' Related Articles more
Comments