form 태그
- 사용자가 입력한 데이터를 수집하기 위해 사용 됨.
📝코드
<!DOCTYPE html>
<html>
<body>
<form action="test/html" method="get">
<label for='name'>ID:</label>
<input type="text" id="name" value="test@naver.com"><br>
<label for='username'>username:</label>
<input type="text" id="username" value="jiseong"><br>
<input type="submit" value="제출">
</form>
</body>
</html>action= 입력 데이터가 전송될 URLmethod= 입력 데이터 전달 방식 지정 (e.g. get/post 2가지 방식이 존재)<label>은 form 요소와 명시적으로 연결시켜주며 사용성, 접근성적인 측면으로 중요한 역할을 하기 때문에 사용하 것이 좋다.제출버튼을 클릭시 input태그에 입력된 데이터들을 form태그에 지정된 method방식으로 지정된 URL에게 전달한다.
💻결과
ID:username:
❓ 참조
get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출된다.
반면,post 방식은 데이터가 전송될 때 데이터가 노출되지 않는다.
input 태그
- 사용자로부터 데이터를 입력받기 위해 사용 됨.
📝코드
<!DOCTYPE html>
<html>
<body>
<h3>textInput</h3>
아이디: <input type="text" name="id" placeholder="이메일을 입력해주세요.">
<h3>checkbox</h3>
<input type='checkbox' name='apple' > 사과
<input type="checkbox" name='peach' > 복숭아
<input type="checkbox" name='strawberry' > 사과
<h3>radio</h3>
<input type='radio' name='gender' checked> 남자
<input type="radio" name='gender'> 여자
<h3>date</h3>
<input type="date" name="birthday">
<h3>file</h3>
<input type="file">
<h3>button</h3>
<input type="button" value="Click me" onclick="alert('Hello world!')">
</body>
</html>💻결과
textInput
아이디:checkbox
사과 복숭아 사과radio
남자 여자date
file
❓ 참조
input 속성중에
name은 태그명 , 폼 서브밋시 서버에서 name 명으로 값을 가져 올 수 있음.
value는 해당 태그의 값
select 태그
- 리스트 형태로 나타내어 그 중 하나를 선택할 수 있게 하는 태그
📝코드
<!DOCTYPE html>
<html>
<body>
<select name='company'>
<option>네이버</option>
<option>카카오</option>
<option>구글</option>
</select>
</body>
</html>💻결과
textarea 태그
- 여러 줄의 글자를 입력할 때 사용하는 태그
📝코드
<!DOCTYPE html>
<html>
<body>
<textarea name='message' rows='2' cols='20'>여기에 글을 적어주세요.</textarea>
</body>
</html>💻결과
fieldset/legend 태그
fieldset태그는 관련된 입력 양식들을 그룹화 할 때 사용.legend태그는 그룹화된 fieldset의 제목을 정의 할 때 사용.
📝코드
<!DOCTYPE html>
<html>
<body>
<fieldset>
<legend>Login</legend>
<label for='name'>ID:</label>
<input type="text" id="name" value="test@naver.com"><br>
<label for='username'>username:</label>
<input type="text" id="username" value="jiseong"><br>
</fieldset>
</body>
</html>💻결과
Reference
