웹프로그래밍/HTML CSS JavaScript
[HTML/CSS] form/input (여러 속성), button, textarea, select, field, color 변경 등
아잠만_
2024. 4. 25. 17:40
HTML 입력양식
일방적으로 보여주는 방식과 사용자가 서버에 데이터를 보내는 두가지 방식으로 분류할 수 있음
form
사용자 입력을 위한 양식을 생성
비밀번호 타입은 type="password"로 둘 것
method
get방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>get</title>
<style>
form{
border : 1px dotted green;
margin: 10px auto;
padding: 10px;
width: 50%
}
span{
display : inline-block; /*block 블럭 요소로 변경*/
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<form action="get.jsp" method="get"> <!-- 제출 시 action으로감-->
<span>아이디</span>
<input type="text" id="" name="id"> <br>
<span>이름</span>
<input type="text" id="" name="name"> <br>
<span>비밀번호</span>
<input type="password" id="" name="pass"> <br>
<br>
<input type="submit">
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1{
color : maroon;
}
table{
border : 2px solid blue;
}
td {
width: 300px;
height: 50px;
text-align: center;
}
th{
height : 50px;
background: gold;
}
</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
<h2>서버내에서 실행되는 스크립트형식의 파일</h2>
<h2>html코드와 java 문장을 사용할 수 있다.</h2>
<h3>java코드를 기술하기 위해서는 <% %> 기호내에 기술한다</h3>
<h3>클라이언트가 전송한 데이터(id, password, name)를 받아서 처리한 후<br>
결과를 클라이언트로 전송해준다</h3>
<h3>클라이언트가 전송한 데이터(id, password, name)를 받을 때 : request 내장 객체를 이용한다.</h3>
<h3>결과 생성 - html코드를 이용한다</h3>
<%
String userId = request.getParameter("id");
String userName = request.getParameter("name");
String userPw = request.getParameter("pass");
// db 연결해서 CRUD 처리 후 결과를 응답 데이터로 생성한다.
%>
<%--JSP의 주석--%>
<%--결과를 table로 작성--%>
<!--html의 주석(소스보기로 보임)-->
<!--결과를 table로 작성-->
<table border="1">
<tr>
<th>아이디</th>
<th>이름</th>
<th>비밀번호</th>
</tr>
<tr>
<td><%=userId %></td>
<td><%=userName %></td>
<td><%=userPw %></td>
</tr>
</table>
</body>
</html>http://localhost/webpro/0424/get.jsp?id=dkdlel&name=%ED%99%8D%EA%B8%B8%EB%8F%99&pass=123456
정보가 주소창에 저장
get은 인코딩이 utf-8로되어있기때문에 한글이 깨지지않음
post방식
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>post</title>
<style>
h1{
color : maroon;
}
table{
border : 2px solid blue;
}
td {
width: 300px;
height: 50px;
text-align: center;
}
th{
height : 50px;
background: gold;
}
</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
<h2>서버내에서 실행되는 스크립트형식의 파일</h2>
<h2>html코드와 java 문장을 사용할 수 있다.</h2>
<h3>java코드를 기술하기 위해서는 <% %> 기호내에 기술한다</h3>
<h3>클라이언트가 전송한 데이터(id, password, name)를 받아서 처리한 후<br>
결과를 클라이언트로 전송해준다</h3>
<h3>클라이언트가 전송한 데이터(id, password, name)를 받을 때 : request 내장 객체를 이용한다.</h3>
<h3>결과 생성 - html코드를 이용한다</h3>
<%
String userId = request.getParameter("id");
String userName = request.getParameter("name");
String userPw = request.getParameter("pass");
// db 연결해서 CRUD 처리 후 결과를 응답 데이터로 생성한다.
%>
<%--JSP의 주석--%>
<%--결과를 table로 작성--%>
<!--html의 주석(소스보기로 보임)-->
<!--결과를 table로 작성-->
<table border="1">
<tr>
<th>아이디</th>
<th>이름</th>
<th>비밀번호</th>
</tr>
<tr>
<td><%=userId %></td>
<td><%=userName %></td>
<td><%=userPw %></td>
</tr>
</table>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1{
color : maroon;
}
table{
border : 2px solid blue;
}
td {
width: 300px;
height: 50px;
text-align: center;
}
th{
height : 50px;
background: gold;
}
</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
<h2>서버내에서 실행되는 스크립트형식의 파일</h2>
<h2>html코드와 java 문장을 사용할 수 있다.</h2>
<h3>java코드를 기술하기 위해서는 <% %> 기호내에 기술한다</h3>
<h3>클라이언트가 전송한 데이터(id, password, name)를 받아서 처리한 후<br>
결과를 클라이언트로 전송해준다</h3>
<h3>클라이언트가 전송한 데이터(id, password, name)를 받을 때 : request 내장 객체를 이용한다.</h3>
<h3>결과 생성 - html코드를 이용한다</h3>
<%
request.setCharacterEncoding("UTF-8"); // 인코딩 설정
String userId = request.getParameter("id");
String userName = request.getParameter("name");
String userPw = request.getParameter("pass");
// db 연결해서 CRUD 처리 후 결과를 응답 데이터로 생성한다.
%>
<%--JSP의 주석--%>
<%--결과를 table로 작성--%>
<!--html의 주석(소스보기로 보임)-->
<!--결과를 table로 작성-->
<table border="1">
<tr>
<th>아이디</th>
<th>이름</th>
<th>비밀번호</th>
</tr>
<tr>
<td><%=userId %></td>
<td><%=userName %></td>
<td><%=userPw %></td>
</tr>
</table>
</body>
</html>jsp에 인코딩 설정해야함
request.setCharacterEncoding("UTF-8");
http://localhost/webpro/0424/post.jsp
정보가 payload에 저장됨
input
type속성
radio checkbox file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
form{
border : 1px dotted green;
margin: 10px auto;
padding: 10px;
width: 50%
}
label{
display : inline-block; /*block 블럭 요소로 변경*/
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<form action="radio_checkbox.jsp" method="post">
<label>이름</label>
<input type="text" name="name" ><br>
<!-- 초기값 value="홍길동" -->
<label>아이디</label>
<input type="text" name="id"><br>
<!-- 초기값 value="a001" -->
<label>성별</label>
<input type="radio" name="gender" value="남자" checked>남자
<input type="radio" name="gender" value="여자" checked>여자
<!-- radio타입은 마지막에 있는 checked만 작동 -->
<br>
<label>좋아하는 음식</label>
<input type="checkbox" name="food" value="불고기">불고기
<input type="checkbox" name="food" value="피자">피자
<input type="checkbox" name="food" value="치킨">치킨
<input type="checkbox" name="food" value="떡볶이">떡볶이
<input type="checkbox" name="food" value="마라탕" checked>마라탕
<input type="checkbox" name="food" value="김밥">김밥
<br>
<label>첨부파일</label>
<input type="file" name="file">
<br>
<br>
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
<br>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1{
color : maroon;
}
table{
border : 2px solid blue;
margin : 10px;
padding : 10px;
}
td {
width: 300px;
height: 50px;
text-align: center;
}
th{
width: 400px;
background: orange;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String file = request.getParameter("file");
String[] food = request.getParameterValues("food");
String str = "";
for(String f : food){
str+=f+" ";
}
%>
<table border="1">
<tr>
<th>아이디</th>
<td><%= id %></td>
</tr>
<tr>
<th>이름</th>
<td><%= name %></td>
</tr>
<tr>
<th>성별</th>
<td><%= gender %></td>
</tr>
<tr>
<th>좋아하는 음식</th>
<td><%= str %></td>
</tr>
<tr>
<th>첨부파일</th>
<td><%= file %></td>
</tr>
</table>
</body>
</html>
입력요소 - button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// 함수 정의
function calc() {
// id="price", id="qty" 인요소에 접근 - 값을 가져온다
// price = document.getElementById('price').value;
let item = document.querySelector('#name').value;
let price = document.querySelector('#price').value;
let qty = document.querySelector('#qty').value;
let res = (price * qty).toLocaleString();
// .toLocaleString() 숫자 수식
alert(`${item}의 총합${res}원`);
// id="result"인 요소를 검색 - 출력 input이므로 value
document.querySelector('#result').value = res;
// 출력내용
code = `<table border="1">
<tr><td>상품명</td><td>${item}</td></tr>
<tr><td>수량</td><td>${qty}</td></tr>
<tr><td>가격</td><td>${price}</td></tr>
<tr><td>합계</td><td>${res}</td></tr>
</table>`;//백틱
// id="dres"인 요소 검색
document.querySelector('#dres').innerHTML=code;
}
</script>
</head>
<body>
<form>
상품명<input type="text" id="name"><br>
가격<input type="number" id="price" value="100" step="10" max="100000" min="10"><br>
수량<input type="number" id="qty" value="10" step="5" max="10000"><br>
<br>
<input type="button" value="확인" onclick="calc()"> <!-- 함수 호출 -->
<br><br>
결과<input type="text" id="result"><br><br>
</form>
<div id="dres"></div>
</body>
</html>입력요소 - img
submit의 역할을 함 버튼 대신에 이미지로 보여줌
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="imageSend.jsp" method="post">
아이디<input type="text" name="id"><br>
이름<input type="text" name="name"><br>
전화번호<input type="text" name="tel"><br>
주소<input type="text" name="addr"><br>
<input type="hidden" name="age" value="30"><br> <!-- hidden타입엔 value필수요소 -->
<input type="image" src="../images/check.png" alt="check">
<input type="reset">
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String userId = request.getParameter("id");
String userName = request.getParameter("name");
String userTel = request.getParameter("tel");
String userAddr = request.getParameter("addr");
String userAge = request.getParameter("age");
%>
<table border="1">
<tr>
<th>아이디</th>
<td><%=userId %>
</tr>
<tr>
<th>이름</th>
<td><%=userName %>
</tr>
<tr>
<th>전화번호</th>
<td><%=userTel %>
</tr>
<tr>
<th>주소</th>
<td><%=userAddr %>
</tr>
<tr>
<th>나이</th>
<td><%=userAge %>
</tr>
</table>
</body>
</html>★★ 자바로 입력시 request.getParameter
출력시 <%= 변수이름 %>을 기억해둘 것 ★★
pattern
[a-z]* 0개 이상
[a-z]+ 1개 이상
[a-z]*[A-Z]+ > Abc, abc
[*&^%$#@!+] 쓰는 특수문자를 포함시키는 법
(\.[a-zA-Z]+){1,2} 이 과정이 1번또는 2번이 포함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/public.css">
<style>
label{
width : 100px;
height: 30px;
display: inline-block;
}
</style>
</head>
<body>
<pre>
input type="hidden" : 안보이는 요소 서버로 값을 전송
속성 disabled : 서버로 전송되지 않는다, 수정 안됨, 비활성화 상태
속성 readonly : 서버로 값을 전송, 값 수정은 안됨
</pre>
<form action="input속성.jsp" method="post">
<label>아이디</label>
<input name="id" readonly value="a001" placeholder="아이디 입력"> <br>
<!-- 안보이는 요소 서버로 값을 전송 -->
<input type="hidden" name="age" value="30">
<!-- disabled : 서버로 전송되지 않는다, 수정안됨, 비활성화 상태 -->
<label>별칭</label>
<input type="text" name="alias" value="토끼" disabled><br>
<label>이름</label>
<input name="name" placeholder="2~10글자 한글 이름 입력" autofocus required pattern="[가-힣]{2,10}"><br> <!-- required 필수항목 -->
<label>이메일</label>
<input name="email" type="text" placeholder="ex. id@naver.com" pattern="[a-zA-Z0-9._%+\-]+@([a-zA-Z]+[0-9.\-]*[a-zA-Z]*)(\.[a-zA-Z]+){1,2}"><br>
<label>전화번호</label>
<!-- <input name="tel" type="tel" placeholder="ex. 010-0000-0000" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"><br> -->
<input name="tel" type="tel" placeholder="ex. 010-0000-0000" pattern="\d\d\d-\d\d\d\d-\d\d\d\d"><br>
<button>출력</button>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1 {
color : purple;
}
</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String age = request.getParameter("age");
String alias = request.getParameter("alias");
%>
<%=id %> - readonly <br>
<%=age %> - hidden <br>
<%=alias %> - disabled <br> <!--null출력 -->
</body>
</html>button태그
input타입과 유사하지만 input과는 달리 </button>으로 닫아줘야된다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼 요소</title>
</head>
<body>
<form action="buttonSend.jsp" method="post">
아이디<input type="text" name="id"><br>
이름<input type="text" name="name"><br>
전화번호<input type="text" name="tel"><br>
주소<input type="text" name="addr"><br>
<input type="hidden" name="age" value="30"><br> <!-- hidden타입엔 value필수요소 -->
<button>전송</button>
<button type="submit" onclick="alert('정보입력이 완료되었습니다')">전송</button>
<button type="reset">취소</button>
<button type="button" onclick="alert('hello')">확인</button>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1{
color : maroon;
}
</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
<%
request.setCharacterEncoding("UTF-8");
String userId = request.getParameter("id");
String userName = request.getParameter("name");
String userTel = request.getParameter("tel");
String userAddr = request.getParameter("addr");
String userAge = request.getParameter("age");
%>
<table border="1">
<tr>
<th>아이디</th>
<td><%=userId %>
</tr>
<tr>
<th>이름</th>
<td><%=userName %>
</tr>
<tr>
<th>전화번호</th>
<td><%=userTel %>
</tr>
<tr>
<th>주소</th>
<td><%=userAddr %>
</tr>
<tr>
<th>나이</th>
<td><%=userAge %>
</tr>
</table>
</body>
</html>textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="textInput.jsp" method="post">
아이디<input name="id"><br> <!-- 기본 값 type="text" -->
나의 소개<br>
<textarea name="info" rows="5" cols="30"></textarea><br>
<br>
<button>전송</button> <!-- 기본 값 type="submit" -->
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table{
border-color : teal green;
border-style: solid dotted;
border-wideth : 5px 3px;
margin: 30px auto;
}
th{
background : teal;
color : white;
height:30px;
width:100px;
}
td{
padding : 10px;
width: 200px;
height: 20px;
}
#col{
height: 200px;
vertical-align: top;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String info = request.getParameter("info");
// info에는 엔터가 포함되어 있다 - \r\n : \r(커서를 앞으로 보내는 것 > 캐리지 리턴) \n(newLine)
// \n을 <br>태그로 변환한다
info=info.replaceAll("\n", "<br>");
%>
</body>
<table border="1">
<tr>
<th>아이디</th>
<td><%=id %></td>
</tr>
<tr>
<th colspan="2">나의 소개</th>
</tr>
<tr>
<td colspan="2" id="col"><%=info %></td>
</tr>
</table>
</html>Select 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
select#foods{ /* 띄어쓰기 X */
vertical-align: top;
}
</style>
</head>
<body>
<form action="form_select.jsp" method="post">
이름<input name="name"><br>
한 개 선택
<select name="food">
<option value="김밥">김밥</option>
<option value="떡볶이" selected>떡볶이</option> <!-- selected="selected" -->
<option value="우동">우동</option>
<option value="라면" selected>라면</option> <!-- 마지막꺼만 선택됨 -->
<option value="돈가스">돈가스</option>
</select>
<br><br>
여러 개 선택
<select id="foods" name="foods" multiple size="5">
<option value="김밥">김밥</option>
<option value="떡볶이" selected>떡볶이</option>
<option value="우동">우동</option>
<option value="라면" selected>라면</option>
<option value="돈가스">돈가스</option>
</select>
<br><br>
<input type="submit" value="전송">
<button>전송</button> <!-- type="submit" -->
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table{
border : 5px dotted green;
margin : 30px auto;
}
th{
background : teal;
color : white;
width: 80px;
height: 50px;
padding: 5px;
}
td{
padding : 5px;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String food = request.getParameter("food");
String[] foods = request.getParameterValues("foods");
String value = "";
for(String str : foods){
value += str+" ";
}
%>
<table border="1">
<tr>
<th>이름</th>
<td><%=name %></td>
</tr>
<tr>
<th>음식</th>
<td><%=food %></td>
</tr>
<tr>
<th>전체 음식</th>
<td><%=value %></td>
</tr>
</table>
</body>
</html>fieldset 태그
입력요소 그룹핑, 그룹의 경계에 선을 그려줌
<legend> 그룹의 제목
label태그에 for 속성을 사용하면 id와 연결
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fieldset</title>
<style>
form{
background : rgb(229,249,230);
border : 10px outset teal;
margin : 10px auto;
padding : 20px;
width: 50%;
}
fieldset{
background : white;
border : 1px dashed gray;
margin : auto;
width: 90%;
}
label{
width : 100px;
height: 30px;
display: inline-block;
}
legend{
font-size: 20px;
font-weight: bold;
}
/* label[for=ma], label[for=fe]{
width: 50px;
} */
.gender{ /* class style*/
width: 50px;
}
label[for=ma]{
margin-left: 30px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>인적사항</legend>
<label for="name">이름</label> <input id="name" name="name"><br>
<label for="addr">주소</label> <input id="addr" name="addr"><br>
<label for="tel">전화번호</label> <input id="tel" name="tel"><br>
</fieldset>
<br>
<fieldset>
<legend>경력사항</legend>
<label>네이버</label> <input type="date" name="comp1_1">~<input type="date" name="comp1_2"><br>
<label>다음</label> <input type="date" name="comp2_1">~<input type="date" name="comp2_2"><br>
</fieldset>
<br>
<fieldset>
<legend>봉사활동</legend>
<label>봉사활동1</label> <input type="date" name="vol1_1">~<input type="date" name="vol1_2"><br>
<textarea name="vol1_3" rows="5" cols="85"></textarea>
<br><br>
<label>봉사활동2</label> <input type="date" name="vol2_1">~<input type="date" name="vol2_2"><br>
<textarea name="vol2_3" rows="5" cols="85"></textarea>
</fieldset>
</form>
<form>
<fieldset>
<legend>인적사항</legend>
<label for="name">이름</label> <input id="name" name="name"><br>
<label for="addr">주소</label> <input id="addr" name="addr"><br>
<label for="tel">전화번호</label> <input id="tel" name="tel"><br>
<label>성별</label>
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
<br>
<br>
<label class="gender" for="ma">남자</label>
<input id="ma" type="radio" name="gender" value="남자">
<label class="gender" for="fe">여자</label>
<input id="fe" type="radio" name="gender" value="여자">
</fieldset>
</form>
</body>
</html>
color
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/public.css">
<style>
form{
border : 20px groove pink;
width : 50%;
height: 500px;
margin : 30px;
padding : 20px;
}
</style>
<script>
/* 함수 정의 */
function changeColor() {
// id=color인 요소
var vcolor = document.getElementById('color').value;
var vcolor = document.querySelector('#color').value;
console.log(vcolor);
// form 요소 접근
vform = document.getElementById('if');
vform = document.nf;
vform.style.borderColor = vcolor;
}
</script>
</head>
<body>
<pre>
색상 선택해서 바뀌면 form태그의 테두리 색을 변경한다</pre>
<input id="color" type="color" onchange="changeColor()">
<br>
<br>
<form id="if" name="nf">
<input type = "number" min="0" max="10000" step="10" value="100"><br>
<input type = "range" min="0" max="10000" step="10" value="100"><br>
<br><br>
</form>
</body>
</html>
Color
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
form{
border : 5px solid black;
margin : 10px auto;
paddding : 10px;
width : 50%;
height : 300px;
}
</style>
<script type="text/javascript">
function changeColor(){
//id="color"인 요소 접근 - 값을 가져온다
vcolor = document.getElementById('color').value
//id=ff1인 요소를 검색 - 배경색을 변경
document.getElementById('ff1').style.backgroundColor = vcolor;
}
function colorChange(target) {
//target변수 : 호출 시 this객체를 받은 변수
vcolor =target.value;
//id=ff2인 요소를 검색 - 배경색을 변경
document.getElementById('ff2').style.backgroundColor = vcolor;
}
</script>
</head>
<body>
<h3><input type="color" onchange="changeColor()"></h3>
<input id="color" type="color" onchange="changeColor()">
<br><br>
<form id="ff1">
</form>
<br>
<hr>
<br>
<h3><input type="color" onchange="colorChange(this)"></h3>
<input id="thiscolor" type="color" onchange="colorChange(this)">
<form id="ff2">
</form>
</body>
</html>