https://www.udemy.com/course/so_easy_html_css/
유데미 <너무 쉬운 HTML/CSS 입문> 에서 학습한 내용을 정리하였다.
Form에 대해서 더 알아보자.
1. 자유 텍스트 입력 Textarea
<form action="tistory.com">
<textarea name="intro" cols="30" rows="5">Please introduce yourself here
</textarea>
</form>- 사용자의 자유로운 텍스트 입력
- rows, cols 속성으로 크기 조절 가능
- <textarea>와 </textarea> 사이의 글자가 textarea 안에 표시된다.
웹페이지에는 다음과 같이 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="tistory.com">
<textarea name="intro" cols="30" rows="5">Please introduce yourself here
</textarea>
</form>
</body>
</html>
Please introduce yourself here이 textarea 안에 들어있고 이 글자들은 커서를 textarea 안에 갖다 대도 사라지지 않는다.
자기소개를 하려면 저 글자들을 지우고 써주면 된다.
2. 파일 선택 File
<input type="file" name="picture"><input type = "file"
- 파일을 선택하는 다이얼로그가 표시됨.
- 파일 선택 후 해당 파일을 어떻게 할 것인지는 자바스크립트 등으로 별도로 처리해야함
웹페이지에는 다음과 같이 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="file" name="picture">
</form>
</body>
</html>
3. 버튼 Button
<input type="button" name="show" value="Show" onclick="alert('Hello')"><input type="button" value="text"
-버튼을 표시하고 value 속성으로 버튼에 보여질 텍스트를 표시
-주로 onclick 이벤트에 자바스크립트 연동
- onclick은 버튼이 눌러졌을 때 이벤트가 발생하는데, 그 이벤트가 발생했을 때 어떤 자바스크립트를 호출할 것인지.
- alert라는 함수를 써서 특정 텍스트가 나오는 팝업창?을 만들 수 있음.
웹페이지에는 다음과 같이 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="button" name="show" value="Show" onclick="alert('Hello')">
</form>
</body>
</html>
저 Show 버튼을 누르면
이렇게 Hello라는 자바스크립트 메시지를 포함한 창이 뜬다.
4. Hidden 값
<input type="hidden" name="hvalue1" value="xyz"><input type="Hidden" value="xyz"
- 화면에 표시되지는 않으나 내부적으로 어떤 값을 가지고 있다가 자바스크립트에서 활용하거나 submit 대상 페이지로 넘겨주는 역할을 함.
- hvalue1이라는 변수(name)에 xyz라는 값(value)을 가지고 있는 상태
웹페이지에는 다음과 같이 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="hidden" name="hvalue1" value="xyz">
</form>
</body>
</html>
****** 이 이외에도 HTML의 업데이트에 따라 비교적 최신의 브라우저(크롬, 웨일, 엣지 등등)에서 지원되는 form들이 몇가지 더 있다.
5. 숫자 Number
<label for = "age">Qty(0-9):</label>
<input type="number" name="age" min="0" max="9"><input type="number" min="x" max="y"
-숫자를 입력받음
- min과 max로 설정한 값들 사이에서 값을 올리고 내릴 수 있는 버튼이 표시됨.
웹페이지에는 다음과 같이 표시됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label for = "age">Qty(0-9):</label>
<input type="number" name="age" min="0" max="9">
</form>
</body>
</html>
일단은 이렇게 보여진다.
여기에 숫자를 입력할 수 있다.
저 박스의 오른쪽에 마우스를 갖다대면 이렇게 up and down 버튼도 나온다.
저 버튼을 눌러서 숫자를 입력할 수도 있고 바로 키보드로도 입력할 수 있다.
코드로 max=9를 설정한 상황에서 10을 입력해보자.
그럼 이렇게 값은 9 이하여야 한다고 뜬다.
6. 컬러 선택 Color
<label for="dcolor">Door Color:</label>
<input type="color" name="dcolor"><input type="color"
-RGB 컬러를 선택하는 color picker가 표시됨.
웹페이지에는 다음과 같이 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label for="dcolor">Door Color:</label>
<input type="color" name="dcolor">
</form>
</body>
</html>
저 검은색 직사각형을 누르면
이렇게 RGB를 선택할 수 있는 부분이 나온다.
7. 날짜, 시간 선택 Date, Time
<label for ="sdate">Start Date/Time:</label>
<input type="date" name="sdate">
<input type="time" name="stime">-날짜를 선택할 수 있는 date picker
-시간을 선택할 수 있는 time picker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for ="sdate">Start Date/Time:</label>
<input type="date" name="sdate">
<input type="time" name="stime">
</body>
</html>
누르면
이렇게 날짜와 시간을 선택할 수 있다.
'Front-End > HTML_CSS' 카테고리의 다른 글
| [HTML/CSS] 220318 학습일기 (0) | 2023.03.19 |
|---|---|
| [HTML/CSS] 220317 학습일기 (0) | 2023.03.18 |
| [HTML/CSS]220314 학습일기 (0) | 2023.03.15 |
| [HTML/CSS] 220313 학습일기 (0) | 2023.03.14 |
| [HTML/CSS] 230312 학습일기 (2) | 2023.03.13 |
