목차
name 예제 - <button> 경우 name 정의 name 구문 name 예제 - <fieldset> 경우 name 예제 - <form> 경우 name 예제 - <iframe> 경우 name 예제 - <input> 경우 name 예제 - <map> 경우 name 예제 - <meta> 경우 name 예제 - <object> 경우 name 예제 - <output> 경우 name 예제 - <param> 경우 name 예제 - <select> 경우 name 예제 - <textarea> 경우
name 예제 - <button> 경우
※ 여러 <button> 태그에 동일 name 속성값 지정 가능하며, 각 버튼 클릭 시 동일 이름으로 다른 값을 서버에 제출 가능.
<form action="/action_page.php" method="get">
언어선택:
<button name="lang" type="submit" value="HTML">HTML</button>
<button name="lang" type="submit" value="CSS">CSS</button>
</form>
name 정의
해당 요소의 이름을 지정.
1. name 속성 사용 가능 태그 종류
<button> , <fieldset> , <form> , <iframe> , <input> , <map> , <meta> , <object> , <output> , <param> , <select> , <textarea>
2. name 속성 용도
모든 태그 공통적으로, JS에서 해당 요소 참조할 때 사용 가능.
<form>요소 경우, JS 참조용으로 주로 사용됨.
<form> 태그 안 폼데이터는 name 속성 있는 요소의 값만 서버에 제출됨. <iframe>요소 경우, 링크 타겟이나 폼데이터 타겟 역할. (<a> /<form> )태그 target 속성이나 (<input> /<button> )태그의 formtarget 속성의 값으로 사용됨.
<map> 요소 경우, <img> 태그의 usemap 속성과 연동해 이미지맵 구성.
<meta>요소 경우, content 속성의 정보/값에 대한 이름 지정. (단, http-equiv 속성 설정된 경우, name 속성 사용 불가.viewport (뷰포트: 웹페이지에서 사용자가 볼 수 있는 영역) 제정 가능한 기능 도입.
<param> 요소 경우, value 속성과 함께 사용 되어 <object> 태그로 지정된 플러그인에 대한 매개변수를 지정.
3.
주요 최신 브라우저 모두 지원.
name 구문
<button name="name "> <fieldset name="name "> <form name="name "> <iframe name="name "> <input name="name "> <map name="name "> <meta name="name "> <object name="name "> <output name="name "> <param name="name "> <select name="name "> <textarea name="name ">
[속성값]
name
해당 요소이름 지정.
name 예제 - <fieldset> 경우
form 요소 안에 JS코드 적을 땐, 해당 form 요소의 이름 대신 form이라 적거나 form 요소의 이름을 생략해도 정상 작동함.
<form action="/action_page.php" method="get">
<fieldset name="mb">
<label for="nick">별명:</label>
<input type="text" id="nick" name="nick">
</fieldset>
<br>
<button type="button" onclick="form .mb.style.backgroundColor='yellow';">fieldset 배경색 변경</button>
<input type="submit">
</form>
결과보기
PS. form 요소 밖에 JS코드 적을 땐, form 요소명 반드시 지정해야 작동.
<form action="/action_page.php" method="get" name="hz " >
<fieldset name="mb">
<label for="nick">별명:</label>
<input type="text" id="nick" name="nick">
</fieldset>
<br>
<button type="button" id="btn">fieldset 배경색 변경</button>
<input type="submit">
</form>
<script>
btn.onclick = ()=>{hz .mb.style.backgroundColor='yellow';}
</script>
결과보기
name 예제 - <form> 경우
<form> 태그 밖의 JS코드는 해당 <form> 태그 이름 지정 필요.
<script>
function formSubmit() {
document.forms['hz '].submit();
}
</script>
<form name="hz " action="/action_page.php" method="get">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age"><br>
<input type="button" onclick="formSubmit()" value="확인">
</form>
name 예제 - <iframe> 경우
<iframe src=" iframe_intro .php" name="hz">
<p>당신 브라우저는 iframe 지원 X</p>
</iframe>
<a href="https://homzzang.com" target="hz">Homzzang.com</a>
name 예제 - <input> 경우
서버에 제출할 폼데이터의 이름 역할.
name 속성 없는 폼데이터는 제출 X.
<form action="/action_page .php">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age"><br>
<input type="submit" value="확인">
</form>
name 예제 - <map> 경우
<img> 태그의 usemap 속성값과 연동해 이미지맵 구성.
<img src="homzzang.jpg" alt="홈짱닷컴" usemap="#hz" width="200" height="200">
<map name="hz" >
<area shape="rect" coords="30,30,60,60" alt="HTML" href="html.php">
<area shape="rect" coords="30,70,60,100" alt="CSS" href="css.php">
<area shape="circle" coords="30,150,30" alt="JS" href="js.php">
</map>
name 예제 - <meta> 경우
content 속성에 대한 정보/값 역할.
name="viewport "일 때, 웹디자이너가 다양한 뷰포트 설정 가능.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="홈페이지 제작관리 강의">
<meta name="keywords" content="HTML5,CSS,JavaScript,PHP,SQL">
<meta name="author" content="홈짱">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>홈짱다컴 Homzzang.com</h1>
<p>홈페이지 제작관리 강의</p>
</body>
</html>
name 예제 - <object> 경우
※ <object> 요소의 이름 지정. JavaScript에서 요소 제어할 때 사용. (id 속성으로도 제어 가능.)
<object data="homzzang.jpg" name="hz" width="200" height="100"></object>
name 예제 - <output> 경우
제출된 폼데이터 참조.
JS에서 해당요소 제어. (아래 예)
<form oninput ="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="10">
=<output name="x" for ="a b"></output>
</form>
결과보기
name 예제 - <param> 경우
<object> 태그로 지정된 플러그인(= data 속성의 값)에 대한 매개변수 지정 위해 value 속성과 함께 사용 .
name 속성 값은 지정된 object에서 지원하는 모든 이름 가능.
name 속성은 모든 주요 브라우저에서 지원되나, <object>에 정의된 파일 형식은 모든 브라우저에서 지원되지 않을 수 있음 .
<object data ="music.wav">
<param name="autoplay" value="true">
</object>
name 예제 - <select> 경우
제출된 폼데이터 참조. (아래 예제)
JS로 해당요소 제어.
<form action="/action_page .php">
<label for="langs">언어선택:</label>
<select name="langs" id="langs">
<option value="html">html</option>
<option value="css">css</option>
<option value="js">js</option>
<option value="jquery">jquery</option>
</select>
<br><br>
<input type="submit" value="확인">
</form>
name 예제 - <textarea> 경우
<form action="/action_page .php">
<textarea rows="4" cols="30" name="self">자기소개 입력</textarea>
<input type="submit">
</form>
<script>
const self = document.querySelector('textarea[name=self]');
const defaultText = '자기소개 입력';
self.addEventListener('focus', function() {
if (self.value === defaultText) {
self.value = '';
}
});
self.addEventListener('blur', function() {
if (self.value === '') {
self.value = defaultText;
}
});
</script>
결과보기
