▶ form태그와 fieldset / legend태그 및 속성 (method, name, action, onsubmit, target)
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
잘 넘어오나
</body>
</html>
위 소스는 아래 <form>태그의 속성인 action이 잘 사용되는지 확인하기위한 페이지입니다.
간단하게 "잘 넘어오나"라는 문구만 입력한 test.html입니다.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form action="test.html" method="get">
이름<input type="text" name="tmp"><br>
주소<input type="text" name="addr"><br>
<input type="reset" value="초기화">
<input type="submit" value="전송">
</form>
</body>
</html>
<form>태그에서 action속성을 사용해보겠습니다.
<form>안에 action속성으로 기존에 위에서 만든 test.html을 넣어줍니다.
저번시간에 실습했던 <input>태그에서는 reset과 submit버튼이 작동하지않았는데요
이번에는 정상작동이 되는걸 확인하실수 있습니다.
그이유는 reset과 submit버튼은 반드시 <form>태그안에 작성되어야 작동이 됩니다.
초기화 버튼 클릭시 입력된 이름과 주소가 사라지고, 전송을 버튼 클릭시 test.html로 이동하는걸 확인할수있습니다.
또한, 이름에 name=tmp를 준것은 실행하고 이름칸에 홍길동을 입력하면 URL에 tmp="홍길동"이라고 나옵니다.
get방식을 선택했기에 나오게됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form action="test.html" method="get">
<select size=1 name="test_5" >
<option value="p1" selected> 사과
<option value="p2"> 배
<option value="p3"> 복숭아
<option value="p4"> 딸기
</select><p>
<button type="submit">전송</button>
</from>
</body>
</html>
이번에는 <form>태그안에 select를 사용해서 실습해보겠습니다.
form태그안에 action으로 test.html을 위와 같이 똑같이입력하고, method속성에는 get방식을 적었습니다.
get은 URL에 기록이 남아있어서 보안에 취약하지만, URL에 띄어줘서 실습하기 편리하기에 get으로 했습니다.
select의 name은 test_5로 주었습니다. 실행해서 전송버튼을 눌러보면 아시겠지만, 예를 들어 사과를 선택했다면 value값이 p1이기에 p1이 test_5변수 값으로 전송됩니다.
그리고 type= submit을 해서 전송하면 test.html로 넘어가게 했습니다.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form action="test.html" method="get">
남기고 싶은말 : <br>
<textarea name="test_6" rows=3 cols=50></textarea><p>
<button type="submit">
<img src="test.jpg" width="50" height="50">
</button>
</from>
</body>
</html>
이번에는 <form>태그안에 textarea를 사용해서 실습해보겠습니다.
위와 동일하게 <form>태그안에는 get방식과 test.html로 넘어가게 해놓았습니다.
그리고 textarea를 통해 긴글 작성할수있게 해놓았습니다. 길이를 지정하기 위해 row와 cols를 설정했습니다.
그다음 버튼을 만들어주고 type은 submit으로설정한다음 버튼안에 이미지를 넣어줬습니다.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<fieldset>
<legend>취미 조사</legend>
책읽기 <input type="checkbox">
공부하기 <input type="checkbox">
책 읽으며 공부하기 <input type="checkbox">
컴퓨터 <input type="checkbox">
</fieldset>
<fieldset style="width:500">
<legend>하고 싶은 말</legend>
<textarea name="test_6" rows=3 cols=60></textarea>
</fieldset>
</body>
</html>
<fieldset>태그는 얇은 테두리를 만들어주는 역할을 하고, 그안의 <legend>태그는 제목과 같은 역할을 합니다.
그리고 <input>태그를 사용해서 checkbox를 4개를 넣어줍니다.
그리고 다시 <fieldset>태그를 사용해주고, 길이(width)를 지정해줍니다.
태그를 사용해서 테두리안에 제목을 입력해주고, textarea로 글작성칸을 작성해줍니다.
'Dev. Front-End > HTML' 카테고리의 다른 글
| [HTML5] header / nav / footer / section / article / figure 의 사용법 (0) | 2019.08.12 |
|---|---|
| [HTML] div태그와 span태그의 사용법과 차이점 (2) | 2019.08.11 |
| [HTML] input태그 및 속성 (type, text, password, hidden, radio, checkbox, search, number) 사용법 (0) | 2019.08.09 |
| [HTML] ul / li / ol / dl / dt / dd 사용법 (0) | 2019.08.08 |
| [HTML] img태그 (이미지넣기) 사용법 (0) | 2019.08.07 |
| [HTML] a태그 (주소 링크 달기) 사용법 및 속성 (0) | 2019.08.06 |
| [HTML] table / caption / tr / td / th / colspan / rowspan / cellpadding / cellspacing 테이블만들기 (0) | 2019.08.05 |
| [HTML] h / font / br & 주석처리 (0) | 2019.08.04 |
