[HTML] 220630
2022. 6. 30. 21:30ㆍHTML
1. Form
- 사용자가 서버에 데이터를 보낼 수 있도록 하는 입력 양식.
- action에는 입력 받은 데이터를 처리할 서버스크립트 파일이 있는 위치를 넣는다.
- method는 사용자가 입력한 데이터가 주소창에 보이게 하려면 get을, 보이지 않게 하려면 post를 넣는다.
<form action="(입력을 처리하는 서버스크립트의 주소)" method="get/post">
<input type="text" name="input">
<input type="submit">
</form>위 코드를 입력하면 아래와 같이 실행된다.
- 버튼에 '제출'이 아닌 다른 문자열을 띄우고 싶다면 다음과 같이 value를 넣으면 된다.
<input type="submit" value="(제출 대신 띄울 문자열)">
- 어떤 항목에 대해 적어야 하는지를 사용자에게 알리고자 한다면
- 블럭 내부일 때는 placeholder을,
- 블럭 외부일 때는 label을 사용하자.
<form action="(입력을 처리하는 서버스크립트의 주소)" method="post">
<input type="text" name="input" placeholder="placeholder사용"> <br>
<label>label 사용</label>
<input type="text" name="input"><br>
<input type="submit" value="다 작성했다면 여기!">
</form>
- 여러 항목이 적힌 리스트 중 하나를 선택하게 한다면 select를 이용한다.
- name은 jsp에서 해당 데이터를 찾을 키워드로 생각하면 될 듯. 변수명 같은...?
<form action="(입력을 처리하는 서버스크립트의 주소)" method="post">
<select name="color">
<option>Red</option>
<option>Orange</option>
<option>Yellow</option>
<option>Green</option>
<option>Blue</option>
<option>Navy</option>
<option>Purple</option>
</select>
</form>
- select의 경우 기본적으로는 최상위에 입력한 내용이 클릭 전에 보이는데, 다른 데이터가 먼저 보이길 원한다면 해당 데이터 앞의 <option>을 <option selected="selected">로 작성한다.
<form action="(입력을 처리하는 서버스크립트의 주소)" method="post">
<select name="color">
<option>Red</option>
<option>Orange</option>
<option>Yellow</option>
<option>Green</option>
<option>Blue</option>
<option>Navy</option>
<option selected="selected">Purple</option>
</select>
</form>
- 만약 선택을 여러 개 받고자 한다면 multiple을 입력한다.
- 한 번에 보일 option의 개수는 size로 조절한다.
<form action="(입력을 처리하는 서버스크립트의 주소)" method="post">
<select name="color" multiple="multiple" size="4">
<option>Red</option>
<option>Orange</option>
<option>Yellow</option>
<option>Green</option>
<option>Blue</option>
<option>Navy</option>
<option selected="selected">Purple</option>
</select>
</form>
- 왼쪽이 multiple을 사용하지 않았을 때, 오른쪽이 사용했을 때이다. 오른쪽의 경우 ctrl을 누른 상태로 클릭하면 다중 선택이 가능하다.
- 입력 받은 내용이 하나인지 혹은 둘 이상인지에 따라 jsp에 쓸 코드가 달라지는데, 이는 하나일 때에는 String이지만 다수일 때에는 배열로 들어오기 때문,,, (아래는 jsp에 쓸 코드)
//단일선택일 경우 (하나라서 getParameter)
String (변수명) = request.getParameter("(html에서 찾을 name)");
//다중선택인 경우 배열로 값을 받음 (여러 개라서 getParameterValue"s"를 사용)
String (배열 변수명) [] = request.getParameterValues("(html에서 찾을 name)");
//배열 안의 데이터를 담을 변수 str
String str = "";
//for문을 통해 차례로 str변수에 담는다.
//여기에서는 <br>을 통해 데이터를 입력받을 때마다 줄이 바뀌도록 처리했다.
for(String fd:foods){
str+=fd+"<br>";
}
- 사용자로부터 비교적 긴 텍스트를 받고자 한다면 textarea를 사용한다.
jsp에서 처리할 데이터 변수명(?)은 name, 보여지는 크기는 행 5, 열 20으로 설정. (아마도 따로 길이 제한은 없는 듯?)
<form action="(입력을 처리하는 서버스크립트의 주소)" method="post">
<label>Text Box</label> <br>
<textarea name="inputtext" rows="5" cols="20"></textarea>
</form>
- textarea에서 입력받은 데이터는 사람이 보는 것처럼 들어오지 않고 Enter을 누른 경우 그냥 띄어쓰기로만 보이고 줄바꿈이 되지 않기 때문에 jsp에서 ☆따로★ 처리해줘야한다. (아래는 해당 jsp코드)
<body>
<%
request.setCharacterEncoding("utf-8");
//인코딩 형식이 맞지 않아 한글이 깨지는 것을 막기위해 인코딩 설정.
String text = request.getParameter("(textarea의 name)");
//name으로 textarea의 내용을 text 변수에 담는다.
//textarea의 경우 정규식으로 값을 반환하기 때문에 줄바꿈이 되지 않는 불상사(...)가 생긴다.
//enter이 \r\n으로 나타나기 때문에 \r은 null로,
// \n은 <br>로 치환하여 줄바꿈이 잘 처리되도록 식을 작성해야 한다.
//replaceAll()로 모두 바꾼 텍스트 데이터를 retext 변수에 넣는 작업.
String retext = text.replaceAll("\r", "").replaceAll("\n","<br>");
%>
</body>
- button의 경우 form 외부에 있고, type도 지정되어있지 않다면 기능이 없는 button이기 때문에(그냥 눌리기만 한다. 화면이 바뀐다거나 창이 뜬다든가의 동작은 없음.) 어떠한 동작을 원한다면 따로 넣어줘야 한다.
입력한 경우
<button onclick="alert('안녕하세요')">확인</button>
입력하지 않은 경우
<button onclick="alert('안녕하세요')"></button>- onclick을 통해 '확인'이라고 쓰인 버튼을 누르면 '안녕하세요'라는 메시지가 담긴 팝업창이 뜬다.
- button의 경우 따로 문자를 쓰지 않으면 버튼이 안 보일 수 있기 때문에 버튼에 띄울 내용을 반드시 입력하자.
다음에,,
input 의 type 중 radio와 checkbox, hidden도 정리해야하는데,,,
→ 기능들 = submit, reset
- button이 form 내부에 있지 않고 type도 지정되어있지 않다면 기능이 없는 button이 된다.
'HTML' 카테고리의 다른 글
| [HTML] 220701 정리하기 (0) | 2022.07.01 |
|---|---|
| [HTML] 대강 정리 중... (0) | 2022.06.27 |