너무 쉬운 HTML/CSS 입문 #2

9~11강 내용

 

사용자 입력 폼(Form)

<form action="이동하고자 하는 페이지">

    <input type="종류" value="버튼의 label">

***종류로는 submit(버튼), text(text box) 등이 있음.

</form>

 

Text Box

<input type="text" value="미리 채워진 값" maxlength="입력 글자수 제한" size="표시되는 box의 크기"

readonly(표시된 값을 바꿀 수 없음) disabled(readonly와 같은데 화면에도 이것이 나타남) 

placeholder="어떤걸 입력해야되는지 알려주는 흐릿한 글씨(누르면 사라짐)">

 

라벨(Label)

<label for="name속성값">라벨내용</label>

<input type="text" name="name속성값">

이렇게 적어주면 input box의 왼쪽에 label이 표시됨.

 

비밀번호(Password)

<label for="pwd">Password</label>

<input type="password" name="pwd" maxlength="12" size="12">

 

Radio Button(여러 옵션 중 하나만 고를 수 있음)

<input type="radio" id="" name="" value=""> ///같은 name을 가진 것들 끼리 묶이고, value속성에 따라 달라짐.

(ex) <input type="radio" id="male" name="gender" value="M" checked><label for="male">Male</label>

<input type="radio" id="female" name="gender" value="F"><label for="female">Female></label>

 

id를 이용하여 label에 대응할 수 있음.

checked 입력하면 default로 체크해 놓을 수 있음.

 

Checkbox(여러 옵션 중 여러개를 고를 수 있음)

<input type="checkbox" name="a" value="a" checked>

<label for="a">A</label>

 

드롭다운 리스트(Drop-down)

Radio와 유사하나, <select>, <option>으로 구현

<label for="gender">Gender:</label>

<select name="gender" size="" multiple> ////size를 통해 선택창의 크기 늘릴수 있고, multiple하면 다수 선택 가능

    <option value="M">Male</option>

    <option value="F" selected>Female</option>

</select>

 

자유텍스트입력(Textarea)

<textarea name="" cols="" rows="">텍스트박스 위에 써 있는 글씨</textarea>

사용자가 직접 입력할 수 있는 텍스트박스를 생성. cols,rows를 통해서 크기 설정.

 

파일 선택(File)

<input type="file" name="picture">

파일을 선택하는 다이얼로그가 표시됨.

 

버튼(Button)

<input type="button" value="" name="" onclick="">

onclick에는 클릭했을 때 자바스크립트 연동

 

Hidden 값

<input type="hidden" name="" value="">

화면에 표시X, 내부적으로 갖고 있다가 javascript에서 활용 or submit에 넘겨주는 역할(value값을)

 

 

 

숫자(Number)

<input type="number" min="x" max="y">

숫자를 입력받고, x, y 사이에서 값을 올리고 내릴 수 있는 버튼이 표시됨.

 

컬러선택(Color)

<input type="color" name="">

RGB 컬러를 선택하는 color picker가 표시됨.

 

날짜, 시간 선택(Date, Time)

<input type="date" name="">

<input type="time" name="">

날짜 혹은 시간을 선택할 수 있도록 함.