[ 21일차 ] html table만들기, form활용하기 test + java 활용해보기

메모장에 써서 .htm 으로 저장해서 하면 암기하기 좋음 !!!

<html>
<head>
<style>


#t1{
    font-size: 60px;
}

</style>
</head>

<body>
<table border="1">
<tr align=center>
  <td colspan="2"><a href="https://www.naver.com" target=new1>
   <img src= ./img/꼬순.jfif width=390 height=149 border=1></a></td>
</tr>
<tr align=center>
  <td height=150>B</td><td>C</td>
</tr>
</table>

<br><br>

<table border=1>
<tr align=center width=100 height=100>
  <td width=100>A</td><td id="t1" width=100><u>B</u></td><td align=right width=100><s>C</s></td><td rowspan="3" width=100>DHL</td>
</tr>
<tr align=center width=100 height=100>
  <td>E</td><td colspan="2" bgcolor= red>FG</td>
</tr>
<tr align=center width=100 height=100>
  <td>I</td><td>J</td><td> <img src= ./img/꼬순.jfif width=99 height=99></td>
</tr>
</table>



</body>

</html>

<html>
<head>

<body>
<form>
<table border=1>
      <caption><h2>회원 의견 조사</h2><br>
                   *는 반드시 입력해야만 합니다.</caption>
<tr>
  <td>*아이디</td><td> <input type="text" name="t1" size=8></td>
</tr><br>
<tr>
  <td>*비밀번호 </td><td><input type="password" name="pwd1" size=8></td>
</tr><br>
<tr>
  <td>이메일</td><td><input type="email" name="email1">(입력한분만 조사결과분석자료를 보내드림)</td>
</tr><br>
<tr>
  <td>제 목 </td><td>대한상공회의소의 친절도에 대한 의견조사</td>
</tr><br>
<tr>
  <td>의견 조사 </td><td>대한상공회의소의 업무 수행 태도에 대하여 어떻게 생각하십니까 ?<br><br>
         <input type="radio" name="r1" value="1" checked>매우 친절하다
         <input type="radio" name="r1" value="2">친절하다
         <input type="radio" name="r1" value="3">좀더 친절했으면 한다</td>
</tr><br>
<tr>
   <td colspan="3" align="center"> <input type="submit" value="보내기">
</tr>
</form>
</body>
</html>

자바 스크립터 적용하기

form에 name="f1" onsubmit="return ch1()" 적고

<html>
<head> 
<script>
  function ch1(){
    if (f1.id1.value==""){
     alert("아이디를 입력하세요!!");
     f1.id1.focus();
     return false;
    }
    if (f1.pwd1.value.length < 3) {
     alert("암호는 3자 이상 작성하세요!");
     f1.pwd1.value = "";
     f1.pwd1.focus();
     return false;
    }
  }
</script>
</head>
<body>
<div align="center">
    <br><br>
<form name="f1"  onsubmit="return ch1()">
<table border=1>
    <caption>
         <h1> 회원 의견 조사 </h1>
         * 는 반드시 입력해야만 합니다.
    </caption>
<tr><td>*아이디 </td> <td><input  type=text  name=id1 size=6 > </td></tr>
<tr><td>*비밀번호 </td> <td><input  type=password  name=pwd1 size=6 > </td></tr>
<tr><td>이메일 </td> <td><input  type=email  name=emai1 >
                                      (입력한분만 조사결과분석자료를 보내드림 ) </td></tr>
<tr><td>제 목 </td> <td> 대한상공회의소의 친절도에 대한 의견조사 </td></tr>
<tr><td>의견 조사 </td> 
    <td>대한상공회의소의 업무 수행 태도에 대하여 어떻게 생각하십니까?<br><br>
        <input type=radio  name=r1  value=1 checked > 매우친절하다
        <input type=radio  name=r1  value=2  > 친절하다
        <input type=radio  name=r1  value=3  > 좀 더 친절했으면 좋겠다
    </td>
</tr>
<tr><td colspan=2  align="center"> <input type=submit value="보내기"> </td></tr>
</table>
</form>
</div>    
</body>
</html>

f1.id1.focus();

f1.pwd1.focus();

위처럼 포커스는

안내창 뜬걸 확인 눌러서 끄면 바로 오류난 값에 표시해준다

return false; 는 위처럼 잘못 입력된 오류값은 안넘어가게 하는 것

f1.pwd1.value=" "; 는 잘못된 입력값을 지워주는 역할

<html>
<head> 
<script>
  function ch1(){
    if(f1.id1.value ==""){
      alert("아이디를 입력하세요");
      f1.id1.focus();
      return false;
    }
    if(f1.pwd1.value!="1234"){
      alert("암호를 확인해주세요");
      f1.pwd1.value="";
      f1.pwd1.focus();
      return false;
    }
    if(f1.emai1.value ==""){
      alert("이메일을 입력하세요");
      f1.emai1.focus();
      return false;
    }

  }
</script>
</head>
<body>
<div align="center">
    <br><br>
<form name="f1"  onsubmit="return ch1()">
<table border=1>
    <caption>
         <h1> 회원 의견 조사 </h1>
         * 는 반드시 입력해야만 합니다.
    </caption>
<tr><td>*아이디 </td> <td><input  type=text  name=id1 size=6 > </td></tr>
<tr><td>*비밀번호 </td> <td><input  type=password  name=pwd1 size=6 > </td></tr>
<tr><td>이메일 </td> <td><input  type=email  name=emai1 value="young@gmail.com">
                                      (입력한분만 조사결과분석자료를 보내드림 ) </td></tr>
<tr><td>제 목 </td> <td> 대한상공회의소의 친절도에 대한 의견조사 </td></tr>
<tr><td>의견 조사 </td> 
    <td>대한상공회의소의 업무 수행 태도에 대하여 어떻게 생각하십니까?<br><br>
        <input type=radio  name=r1  value=1 checked > 매우친절하다
        <input type=radio  name=r1  value=2  > 친절하다
        <input type=radio  name=r1  value=3  > 좀 더 친절했으면 좋겠다
    </td>
</tr>
<tr><td colspan=2  align="center"> <input type=submit value="보내기"> </td></tr>
</table>
</form>
</div>    
</body>
</html>

email에 value 값을 설정해주면 디폴트 값이 된다

'비주얼스튜디오코드' 카테고리의 다른 글

[ 22일차 ] list파일에서 table만들기( for문,while문,문자열함수 활용하기) (0)	2022.06.17
[ 22일차 ] 정보처리기능사 html 실습해보기 (form 태그) (0)	2022.06.17
[ 20일차 ] html table 태그, form태그 연습하기 (0)	2022.06.15
[ 20일차 ] html 태그 연습하기 (0)	2022.06.15
[ 18일차 ] 비주얼스튜디오 코드 (0)	2022.06.13