03 회원가입 폼 만들기, 체크박스, 라디오 버튼, 파일선택, 텍스트입력, 전송버튼

*텍스트 입력

textarea - 여러줄을 입력할때 필요한것
textarea공백있으면 안됨/textarea 사이에 공백이 있으면 절대 안된다.

<span>방문경로를 말씀해주세요.</span>
<textarea name="mb_msg" rows="10" cols="30"></textarea>

 

*읽기만 가능하게

<textarea name="mb_policy" rows="10" cols="100">텍스트</textarea>

위처럼 작성하면 텍스트가 브라우저에서 지울수있다.

<textarea name="mb_policy" readonly="readonly" rows="10" cols="100">

readonly="readonly" 속성과 값이 같을땐 하나만 써주면된다.
<textarea name="mb_policy" readonly rows="10" cols="100">readonly이제 안지워짐</textarea>

readonly="readonly" 읽기만 가능하게 해준다.
여기서 속성=값 이 같은경우에는 하나만 써줄수있다. readonly만 써주면된다.

 

*파일 선택

<span>사진을 등록해주세요.</span>
<input type="file" name="mb_avatar">

위처럼 하고 브라우저에 파일 선택을 하면 파일 이름이 뜬다. 파일 이름으로 데이터베이스에 전송된다.

 

*라디오 버튼

radio버튼 type="radio" 
여기서 미리 체크되게 하고 싶으면 type="radio" checked 라고 적으면 해당 인풋에 미리 체크되있다.
checked는 checkebox와 radio에만 쓸수있다.

<p>
  <span>성별</span>

  <label for="male">남성</label>
  <input id="male" type="radio"  value="남성" name="ss">

  <label for="female">여성</label>
  <input id="female" type="radio" checked value="여성" name="ss">
</p>

 

*선택 불가

<span>거주지</span>
<select name="mb_address">
  <option value="" disabled>거주지를 선택해주세요.</option>
  <option value="">대구</option>
  <option value="">제주</option>
  <option value="">광주</option>
</select>

셀렉트 옵션의 경우. 가령 선택해주세요를 선택해도 넘어가버린다.
그것을 방지하기위해 disabled을 넣어준다.

 

*reset

<input type="reset" value="초기화"/>

초기화 기능// 요즘은 잘 안만듬

 

*전송 버튼의 차이 (input과 button)

button은 텍스트 대신에 이미지를 넣을수있다.
input은 타입을 image로 바꾸고 src="이미지.png" alt="이미지" 를 써야한다.

<input class="btn" type="image" src="send.png" alt="send"/>

<button class="btn" type="submit"><img src="send.png" alt="send"></button>

브라우저에서 보여지는 이미지가 다르다.

<style>
  .btn {width:50px; height:50px; background:none; border:none; padding:0;}
  button img {width:100%;}
</style>

버튼은 무조건 배경에 테두리가 생긴다. css로 바꿔야함 background:none; border:none;  none으로 해줄것.
button img {width:100%;} 부모가 만들어준 너비안에서 (100%)다쓰임 
button엔 기본적으로 padding이 있기때문에 css 조작 필요