CSS로 form 만들기

먼저 form 안에는 로그인 할수 있는 창, 설문조사 질문, 버튼 등 여러가지 요소가 있을것이다. 

이런걸 만들어볼거임

 

Text input field form control elements

• <input type="text"> : single line input
• <input type="password">: password
• <textarea>: multiple line input

 

input controls with validation or special effects

• <input type="email">: ensure the input is an email address
• <input type="search">:provide cross to cancel search
• <input type="tel">: invoke a numpad input on mobile devices
• <input type="url">: insure input is url with correct syntax
• <input type="color">: show colour picker

 

Some attributes can help fine-tuning input controls

• value: initial values
• readonly: the field is read-only
• disabled: the field is not available
• required: the field must be filled out
• autofocus: the field gets focus when page loads

making a list or option

 

<select name="language">
    <option value="C">C</option> 
    <option value="C++">C++</option> 
    <option value="Java">Java</option> 
    <option value="JavaScript" selected>JavaScript</option> 
    <option value="SQL">SQL</option>
</select>

 

which makes:

 

 

C C++ Java JavaScript SQL

<form>
    <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label>
</form>

Male
Female
Other

 

 

<fieldset>: groups items together

<legend>: show group caption

 

button

<button type="button">

<button type="reset">: clears and restores all input controls in form

<button type="submit">: will by default run the form action (if action attribute defined in form --> send form data to server script, not defined--> reload page)

 

 

자 이제 교수가 준 html 스크립트를 한번 분석해보자. 

---

<form><!--form의 시작. 유저 인풋을 받기 위한 html form을 만들때 쓰인다. <form> 요소는 텍스트 필드, 체크박스, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소를 위한 컨테이너다 -->
<input type="text" <!-- single line input을 받을때-->
       name="LoginName" 
       value="Initial Value"> <!--initial value라는 글자가 이미 입력되어있다-->
  <br>
<input type="password" <!--password를 위한 박스-->
       name="Pass">
  <br>
<textarea name="name" 
          cols="25" rows="5">
Initial text to 
appear 
in the text area. <!-- name 박스 안에 처음 보이는 글자-->
</textarea>
  <br>
  <hr>
Email: <input type="email"> <!--이메일 입력을 위한 박스-->
  <br>
Search: <input type="search"> 
  <br>
Tel: <input type="tel">
  <br>
URL: <input type="url">
  <br>
Color: <input type="color">
  <br>
  <hr>
<input type="checkbox"
 name="web" checked> Web<br>
<input type="checkbox"
 name="design"> Design<br>
<input type="checkbox"
 name="code"> Code
<br>
  <hr>
<input type="radio" name="lang"
 value="Java"> Java<br>
<input type="radio" name="lang" 
 value="C++"> C++<br>
<input type="radio" name="lang" 
 value="JS" checked> JS
  <br>
  <hr>
<select name="language">
  <option value="C">C</option> <!-- 그냥 옵션--> 
  <option value="C++">C++</option>
  <option value="Java">Java</option>
  <option value="JavaScript" selected>		JavaScript</option>
  <option value="SQL">SQL</option>
</select>
<br>
  <hr>
  <form>
  <fieldset>
<legend>Choose your interests</legend>
<div>
  <input type="checkbox" id="coding" name="interest" value="coding"> <!--fine tuning input control 을 사용함(value)--> 
  <label for="coding">Coding</label>
</div>
<div>
  <input type="checkbox" id="music" name="interest" value="music">
  <label for="music">Music</label>
</div>
</fieldset>
<button type="button">Simple button</button><br>
<button type="reset">Reset button</button><br>
<button type="submit">Submit button</button>

</form>

 

이걸 실행시키면 이렇게됨

 

---

name="LoginName" value="Initial Value">
name="Pass">
Initial text to appear in the text area. <!-- name 박스 안에 처음 보이는 글자-->

---

Email:
Search:
Tel:
URL:
Color:

---

Web
Design
Code

---

Java
C++
JS

---

C C++ Java  JavaScript SQL

---

Choose your interests

Coding

Music

---

 

고등학교 CAS로 사이트 만들기할때 폼 만드는 방법 몰라서 구글 폼 썼던 기억이 있는데ㅋㅋㅋㅋ

이거랑 submit form element을 써서 form 을 보낼수 있도록 약간의 js 를 배우면 form도 이제 만들수 있을듯

발전한 나! 

 

참고로 고등학교때 만든 사이트:

http://esisb.now.sh

https://esisb.vercel.app/

이때 JS 몰라서 사이트 publish는 딴애가 했는데 이제 내가 만들수 있어야하네ㅋㅋ

진짜 개허접하고 하찮다