텍스트 입력
<input>태그의 type 속성에 "text"를 입력하면 사용자로부터 텍스트를 입력받는 곳을 만들 수 있다. "password"속성을 입력하면 패스워드 입력란 처럼 사용자의 입력값의 내용을 확인할 수 없도록 할 수 있다.
input태그는 서버로 값을 전송할때 많이 쓰기 때문에 서버에서 값을 인식할 수 있도록 name 속성을 꼭 사용해 줘야 한다.
value 속성에 값을 넣으면 기본 값을 설정해 줄 수 있다.
텍스트 입력값을 여러줄로 받고 싶을 때는 <textarea> 태그를 사용하면 된다.
cols 속성을 사용하면 폭을 지정해 줄 수 있고, rows속성을 사용하면 높이를 지정해 줄 수 있다.
textarea태그에서 기본 값을 설정해주려면 태그 안에 값을 넣으면 된다.
<html>
<body>
<form action="">
<p>text : <input type="text" name="id" value="default value"></p>
<p>password : <input type="password" name="pwd" value="default value"></p>
<p>textarea :
<textarea cols="50" rows="2">default value</textarea>
</p>
</form>
</body>
</html>
선택
사용자들에게 여러가지 선택지 중 하나를 선택하게 하는 방법중 Dropdown List 라는 방법이 있다. Dropdown List는 제한된 공간 안에서 여러개의 선택지 중 하나를 선택하는 방법이다.
<select> 태그 안에 <option> 태그를 사용하여 선택하는 태그를 만들 수 있다. 이렇게 사용하면 선택지 중에 하나만 선택할 수 있다.
선택지 중에 여러개를 선택하도록 만들고 싶다면 <select> 태그에서 multiple 속성을 사용해야 한다. 이 속성은 속성값이 없이 속성만 사용한다. 여러개를 선택할 때는 Ctrl키를 누른 후 선택할 항목을 클릭하면 된다.
선택한 정보를 서버로 전송하기 위해서는 역시 <form> 태그를 사용해야 한다.
서버로 전송할 때 선택한 정보를 컴퓨터가 더 이해하기 쉽도록 하려면 value 태그를 이용하여 서버로 전송할 값을 따로 지정해 줄 수 있다.
<html>
<head>
<meta charest="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2 다중선택</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html>
서버로 전송되는 값을 보면 color2는 여러개의 색상이 전송되어 있고, 모두 value속성에서 지정한 값으로 전송되는 것을 확인할 수 있다.
버튼
<input> 태그의 type 속성에 "submit"을 지정하면 클릭했을 때 서버로 폼의 내용이 전송되는 버튼을 만들 수 있다. 버튼 안의 글자는 value 속성을 이용하여 바꿀 수 있다.
type 속성에 "button"을 지정하면 어떤 효과도 갖지 않는 버튼을 만들 수 있다. 이 버튼은 onclick속성을 이용하여 클릭했을 때의 효과를 지정해 줄 수 있다. 아래 코드에서는 자바스크립트로 클릭시 경고창을 띄우는 기능을 지정하였다.
type 속성에 "reset"을 지정하면 클릭시 폼에 작성한 내용들이 모두 초기화 되는 버튼을 만들 수 있다.
<html>
<head><meta charset="utf-8"></head>
<body>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello')">
<input type="reset">
</form>
</body>
</html>
위는 버튼을 클릭했을시 자바스크립트로 지정한 경고창이다.
데이터 전송 - hidden
서버로 데이터를 전송할 때 UI가 굳이 필요 없거나 데이터를 몰래 전송해야 할 경우 hidden을 사용한다.
<input>태그의 type속성에 "hidden"을 지정해 주면 된다. value 속성에 서버로 전송할 값을 넣는다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="phulasso">
<input type="submit">
</form>
</body>
</html>
웹 페이지를 보면 ui에서 hidden 속성을 사용한 input태그는 보이지 않는다. 하지만 값을 넣어서 전송해보면 다음과 같이 hidden 속성의 value 값이 서버로 전송되는 것을 확인할 수 있다.
컨트롤의 제목 - lable
input 태그의 이름을 정할 때 html에서 권장하는 방법은 <lable>태그를 사용하는 것이다. input 태그의 이름을 <lable>태그로 감싸면 된다.
어떤 input태그의 이름인지 확실하게 명시하기 위해서 input 태그에 id라는 속성을 넣어 값을 지정하고, lable 태그의 for 속성에 input 태그에서 지정한 id값을 넣어야 한다.
아니면 lable 태그로 input태그의 이름과 input태그까지 같이 감싸도 된다.
lable 태그를 사용하게 되면 input 태그의 이름을 클릭해도 해당 input 태그가 선택되고, 체크박스인 경우 이름만 클릭해도 체크박스가 체크된다.
<html>
<body>
<form action="">
<p>
<label for="id_txt">text :</label>
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
<label for="password">password :</label>
<input id="password" type="password" name="pwd" value="default value">
</p>
<p>
<label>textarea :
<textarea cols="50" rows="2">default value</textarea>
</label>
</p>
<p>
<label>
<input type="checkbox" name="color" value="red"> 붉은색
</label>
<label for="color_blue">
<input id="color_blue" type="checkbox" name="color" value="blue"> 파란색
</label>
</p>
</form>
</body>
</html>
'Project H4C Study Group' 카테고리의 다른 글
| [Project H4C] opentutorials HTML(5) (0) | 2021.02.12 |
|---|---|
| [Project H4C] opentutorials HTML(4) (0) | 2021.02.11 |
| [Project H4C] opentutorials HTML(2) (0) | 2021.02.06 |
| [Project H4C] opentutorials HTML(1) (0) | 2021.02.04 |
| [Project H4C] 코드업 기초100제(4) (0) | 2021.02.04 |