웹 기초 6강 - HTML - <form 타입>

Whatever·2021년 11월 4일
0

웹 기초

목록 보기
6/32

HTML에서 모든 함수는 number타입
function proc(){ }

<form action="get.jsp" method="get">
아이디<input type="text" name="id">
비밀번호<input type="password" name="pass">
<input type="submit" value="전송">

body태그에 있는 내용들을 document로 만들어서 객체로 만든다.

script에서는 변수 선언을 타입 상관없이 var로 한다.

label{
display: inline-block; --인라인요소를 블럭요소에 적용하는 것들 다 적용하고 싶을 때
width: 100px;
height: 30px;
}

서버 설정했을 때 server.xml의 URIencoding="UTF-8" 설정은 get방식을 설정해준 것.
post방식은 jsp 페이지에서 따로 설정해줘야 함.
<%
request.setCharacterEncoding("UTF-8"); => 설정방법
%>

<button> 버튼

<input type ="submit">
<button type="submit">도 가능
<button >눌러보세요!</button>
submit기능을 수행

fieldset

<fieldset> => 그룹으로 묶는 것
입력 요소를 그룹핑하는 데 사용되는 태그
그룹의 경계에 선을 그려준다.
<legend>를 사용하면 그룹에 제목을 붙일 수 있음
<form>
<fieldset>
<legend>인적사항입력</legend>
이름: <input type="text"><br>
전화번호: <input type="text"><br>
주소: <input type="text">
</fieldset>
</form>

<style>
*{
box-sizing: border-box;
}
form{
border: 2px solid blue;
margin: 10px;
padding: 5px;
width: 50%; => 브라우저 화면을 기준으로 50%
height: auto;
}
label{
display: inline-block;
width: 100px;
height: 30px;
}
fieldset {
width: 50%; => form을 기준으로 50%
width: calc(90% - 1%); => 1퍼센트씩 줄여라
height: auto;
}
</style>

String객체.replaceAll(old, new)

힌트주기 - placeholder
<input type="text" name="name" placeholder="홍길동"><br>

<form action="area.jsp" method="post"> =>action이 수행되지 못하도록 일단 막아놓은것
<input type="button" value="전송"> => onclick의 proc

script
.trim() => 공백제거

    function proc(){ => click을 해야 실행됨 
	var idvalue = document.ff.id.value.trim();
	if(idvalue.length < 1){
		alert("아이디를 입력해주세요")
		return false;
	}
	
	var namevalue = document.ff.name.value.trim();
	if(namevalue.length < 1){
		alert("이름을 입력해주세요")
		return false;
	}
	
	var emailvalue = document.ff.email.value.trim();
	if(emailvalue.length < 1){
		alert("이메일을 입력해주세요")
		return false;
	}
	
	var areavalue = document.ff.area.value.trim();
	if(areavalue.length < 1){
		alert("자기소개를 입력해주세요")
		return false;
	}
	alert("입력성공")
	document.ff.submit();
}

<scirpt> => 위에서부터 차례로 실행됨
</script>

<body> => body에서 form이 실행되어야 위의 script가 실행됨
</body>

0개의 댓글

Powered by GraphCDN, the GraphQL CDN