HTML과 CSS를 공부하는 간단한 신청 양식을 만들었습니다.
어떤 형태를 어떻게 만들었는지를 간결하게 정리했습니다.

아티팩트

만든 것은 이런 느낌.
회원제 사이트에 있을 것 같은 심플한 신청 폼을 만들었습니다.

HTML

<div class="content">
   <h1>入会申し込み</h1>
   <p>入会するには、次のフォームに必要事項をご記入ください。</p>
   <div class="controll">
      <label for="myemail">メールアドレス <span class="required">必須</span></label>
      <input id="myemail" type="email" name="email">
   </div>
   <div class="controll">
      <label for="mypassword">パスワード <span class="required">必須</span></label>
      <input id="mypassword" type="password" name="password">
   </div>
   <div class="controll">
      <button type="submit">登録する</button>
   </div>
</div>

폼의 타이틀은 h1 태그로, 타이틀 바로 아래의 주석을 p 태그로 출력.
폼의 송신 항목인 메일 주소와 패스워드는 input로 출력해,
button 태그가 클릭되었을 때, input 태그의 입력치가 송신되는 상정.

하지만 폼이라고 말하기 때문에는 form 태그를 사용하는 것이 좋았구나・・・
form 태그로 다시 쓴 녀석이 이런 느낌 ↓↓

<form class="content">
   <h1>入会申し込み</h1>
   <p>入会するには、次のフォームに必要事項をご記入ください。</p>
   <div class="controll">
      <label for="myemail">メールアドレス <span class="required">必須</span></label>
      <input id="myemail" type="email" name="email">
   </div>
   <div class="controll">
      <label for="mypassword">パスワード <span class="required">必須</span></label>
      <input id="mypassword" type="password" name="password">
   </div>
   <div class="controll">
      <input class="submit" type="submit" value="登録する">
   </div>
</form>

전체를 둘러싸고 있던 div 태그가 form 태그가 되어, 「등록한다」버튼의 태그가 input 태그가 되는 느낌이군요.
본래라면 form 태그에는 송신처등을 정의해 줍니다.

CSS

개인적으로 CSS는 약하다.
아직 세련된 애니메이션을 만드는 것은 할 수 없습니다만, 어쨌든 심플한 외형으로 하는 것 의식했습니다.

.submit {
    width:100%;
    background-color: #2096f3;
    color:#fff;
    padding:15px;
    border: 0;
    border-radius:5px;
    box-shadow: 0 0 8px rgba(0,0,0,.4);

}

.required {
    color:#f33;
    font-size: .9em;
    padding: 3px;
    background-color: #fee;
    font-weight: bold;
}

요점만.

「.submit」에서는 「등록한다」버튼의 디자인을 맞추고 있습니다.
색상이나 테두리는 좋다고, box-shadow의 각 설정값은 주의입니다.
x축, y축, 그림자의 농도, 그림자의 색(r, g, b, 불투명도)을 각각 설정합니다.

요약

이번에는 간단한 신청 양식을 만들었습니다.
css의 색칠로 원색은 사용하지 않는 것이 좋을 것 같네요.
색채 따위는 앞으로 여러가지 만들어가는 가운데 배워 갑니다.

응용으로서 폼의 송신처를 작성해, DB에 송신 내용을 등록해,,, 뭐라고 곳까지 만들 수 있게 되면 좋을 것 같다.

참고

[HTML/CSS/JavaScript] 프런트엔드 엔지니어가 되고 싶은 사람의 웹 프로그래밍 입문