※ 이 글을 쓰는 사람은 SW 비전공자입니다.
※ 개인 공부를 위해 정리하는 글이며, 작성한 코드들은 효율성, 깔끔함(?) 등과는 거리가 멀 수 있습니다.
1편 : 2021.04.11 - [코딩/Web & Java Script] - [웹코딩]Front end 및 Back end 개념, 공부 방향
2편 : 2021.04.12 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 1 : 기초
3편 : 2021.04.19 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 2 : 문단, 정렬, 이미지
4편 : 2021.04.20 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table
참고 : 2021.04.22 - [코딩/Web & Java Script] - [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법
원래는 코드카데미를 통해 html을 공부하려 했으나 공부하기 불편한 부분이 있어서 HTML과 CSS는 '생활코딩'으로 공부해보려고 한다. 사이트 운영자분이 유튜브로도 강의를 하고 있어서 굉장히 유용하다. 참고를 위해 하단의 링크를 명시해두었다.
오늘은 HTML의 form과 text area에 대한 것을 정리해보았다.
1. HTML form
form : 로그인할시 ID, PW 등 정보를 전송하기 위해 작성하는 양식
1) form 기본 사용 방법
<코드>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php"
<p>이름 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="password"></p>
<p>생년월일 : <input type="text" name="birth"></p>
<input type="submit">
</form>
</body>
</html>
-. form action =" " : HTML form 양식에서 submit(제출)을 했을 때 정보를 보내는 곳이다.
실제 웹개발 진행시 Server side(백엔드)쪽인 것으로 보여진다.
이 주소는 서버개발자와 커뮤니케이션하여 정해진 주소대로 입력하면 된다고 한다.
-. input type=" " name =" " : 각 입력 form양식에 대한 정보이다. type은 입력되는 data의 양식,
name은 백엔드쪽에 보낼 때 어떤 이름으로 보내질지에 대한 정보이다.(변수?)
<실행 및 결과>
-. 결과는 위와 같이 정리해보았다.
-. 각 text, password form에 입력하여 제출버튼을 클릭하면 위 표시 된 localhost/login.php (Server side)로 정보를 전달하는 것을 확인할 수 있다.
-. localhost/login.php는 HTML 코드에서 form action으로 설정한 주소이다.
-. 임의로 정한 가상의 주소이며, 실제 웹개발시 서버쪽 주소가 들어간다.
-. 주소 뒷부분에느 각 name으로 설정한 정보가 그대로 전달되는 것을 확인할 수 있다.
2) form default value 설정 방법
-. 1)에서 다룬 결과는 내가 직접 text창에 입력을 하였고 dafault로 값이 들어가게 설정하고 싶다면 input 태그에 value="dafault값 내용"을 입력한다.
<코드>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php"
<p>이름 : <input type="text" name="id" value="예시로 입력해봄 : default"></p>
<p>비밀번호 : <input type="password" name="password" value="안보임"></p>
<p>생년월일 : <input type="text" name="birth" value="Secret"></p>
<input type="submit">
</form>
</body>
</html>
<결과>
2. textarea
-. textarea는 여러 줄을 입력할 겨우 입력받는 form 양식이다.(위에서 다뤘던 방식은 1줄만 입력 됨.)
-. 예를 들면 택배 배송메시지 같은 경우를 예로 들 수 있을 것 같다.
1) 기본 사용법
<코드>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>
배송메시지:<textarea></textarea>
</p>
</form>
</body>
</html>
2) cols, rows, default value 설정하기 :
-. textarea는 입력할 수 있는 form의 크기 및 default 값을 아래와 같이 설정할 수 있다.
<코드>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>
배송메시지:<textarea cols="50" rows="5"></textarea>
</p>
</form>
</body>
</html>
※ 위 자료는 생활코딩의 'HTML 수업' 강좌를 통해 정리한 글입니다.
(www.opentutorials.org/course/2039
HTML 수업 - 생활코딩
수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리
www.opentutorials.org
'코딩 > Web' 카테고리의 다른 글
| [웹코딩]HTML(Hyper Text Markup Language) - 6 : GET vs POST (0) | 2021.05.10 |
|---|---|
| [웹코딩] HTML(Hyper Text Markup Language) - 5 : dropdown, radio/checkbox (0) | 2021.05.01 |
| [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법 (0) | 2021.04.22 |
| [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table (1) | 2021.04.20 |
| [웹코딩] HTML(Hyper Text Markup Language) - 2 : 문단, 정렬, 이미지삽입 (0) | 2021.04.19 |
