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="">
날짜 혹은 시간을 선택할 수 있도록 함.
'프로그래밍 > Web' 카테고리의 다른 글
너무 쉬운 HTML/CSS 입문 #3 (0) | 2022.10.01 |
---|---|
너무 쉬운 HTML/CSS 입문 #1 (0) | 2022.09.25 |