기록

코딩독학 HTML (출처 : tcpschool.com)

온라인으로 바로 코딩 실습이 가능한 티씨피스쿨의 내용을 필사해서 결과보기하는 식으로 연습 중

input 요소의 속성 : 사용자가 입력하는 방식을 다양하게 제어할 수 있음

1. value 속성

입력 필드 (input field)에 나타나는 초깃값 설정

<form>

    이름 : <br><input type="text" name="student_name"><br>

    학번 : <br><input type="text" name="student_id"><br>

    학과 : <br><input type="text" name="department" value="컴퓨터공학과"><br>

</form>

결과 >>

2. readonly 속성

사용자가 수정할 수 없는 입력 필드

disabled 와 다르게 전송하면 초깃값이 서버로 전송됨

<form>

    이름 : <br><input type="text" name="student_name"><br>

    학번 : <br><input type="text" name="student_id"><br>

    학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>

</form>

결과 >>

3. disabled 속성

사용자가 입력필드를 아예 사용할 수 없음

클릭 불가능

전송 버튼을 눌러도 초깃값이 서버로 전송되지 않음

<form>

    이름 : <br><input type="text" name="student_name"><br>

    학번 : <br><input type="text" name="student_id"><br>

    학과 : <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>

</form>

결과 >>

4. maxlength 속성

입력 필드에 입력할 수 있는 문자의 최대 길이를 설정함

<form>

    이름 : <br><input type="text" name="student_name" value="홍길동" maxlength="10"><br>

    학번 : <br><input type="text" name="student_id"><br>

</form>

결과 >>

5.  size 속성

input 요소의 크기 설정

maxlength와 다르게 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미함

	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name" value="value 값 : 30" size="30"><br>
		학번 : <br>
      
      		이름 : <br>
		<input type="text" name="student_name" value="value 값 : 50" size="50"><br>
		학번 : <br>
		<input type="text" name="student_id"><br><br>
		<input type="submit" value="전송">
	</form>

결과 >>

내용 출처 : 티씨피스쿨 (tcpschool.com)

돌아온 코딩 공부

너무 오랜만이다ㅎ

출처 : tcpschool.com

온라인으로 실습이 바로 가능해서 편함.

tcpschool 내용을 필사해서 결과보기 하는식으로 연습..

1. 선택 입력 select 요소

하나의 옵션만 입력 받을 수 있음

selected 속성으로 미리 선택되는 옵션 지정 가능함

	<h1>선택 입력</h1>
	<p>다음 중 여러분이 가장 좋아하는 과일을 골라주세요.</p>
	<form>
		<select name="fruit">
			<option value="apple"> 사과
			<option value="orange" selected> 귤
			<option value="strawberry"> 딸기
			<option value="peach"> 복숭아
		</select>
	</form>

결과 >>

2. 문장입력 textarea

여러 줄의 텍스트 입력받기

rows, cols 속성을 이용해 크기 지정 가능함

	<h1>문장 입력</h1>
	<p>여러분의 부모님께 하고 싶은 말을 적어보세요.</p>
	<form>
		<textarea name="message" rows="5" cols="30">여기에 적으세요.</textarea>
	</form>

결과 >>

3. 버튼 button

버튼을 누르면 알림창이 뜸

<h1>버튼 입력</h1>
	<button type="button" onclick="alert('버튼을 클릭하셨군요!')">버튼을 눌러주세요.</button>

결과 >>

4. 전송 버튼 submit

데이터를 폼 핸들러로 제출

폼 핸들러 : 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지

form 요소와 action 속성을 이용

<h1>전송 버튼</h1>
	<form action="/examples/media/request.php">
		어릴 때 자신의 별명을 적어주세요 : <br>
		<input type="text" name="nickname" value="별명"><br><br>
		<input type="submit" value="전송">
	</form> 
	<p>별명을 적으신 후에 전송 버튼을 눌러보세요!</p>

결과 >>

5. 필드셋 fieldset

form 요소와 관련된 데이터들을 하나로 묶어줌

elgend 요소는 filedset 요소 안에서만 사용 가능, fieldset 요소의 제목을 나타냄

	<h1>필드셋</h1>
	<form action="/examples/media/request.php">
		<fieldset>
			<legend>입력 양식</legend>
			이름 : <br>
			<input type="text" name="username"><br>
			이메일 : <br>
			<input type="text" name="email"><br><br>
			<input type="submit" value="전송">
		</fieldset>
	</form>

결과 >>

출처 : 티씨피스쿨 (tcpschool.com)

출처는 tcpschool.com 입니다.

코딩독학 ~~

오늘은 HTML form 요소 2편 ~~~~~

오늘은 너무 졸리드아아아아아앙

세상 만사가 귀찮다아아아아

그래도쬐끔만 해바야지...................

텍스트 입력 받기 : <input> 태그 text 속성

<form action="/examples/media/request.php">

    검색할 내용을 입력하세요 :

    <input type="text" name="search">

</form>

비밀번호 입력 받기 : <input> 태그 password 속성

<h1 style="color:red">비밀번호 입력</h1>

<form style="color:magenta">

사용자 : <br>

<input type="text" name="username"><br>

비밀번호 : <br>

<input type="password" name="password">

</form>

>> 결과

<h1>라디오 버튼</h1>

<p>감자튀김을 좋아하시나요?</p>

<form>

<input type="radio" name="potato" value="yes" checked> 예 <br>

<input type="radio" name="potato" value="no"> 아니오 <br>

</form>

>> 결과

체크박스 : <input> 태그 checkbox 속성 (여러개 옵션 선택)

<h1>체크박스</h1>

<p>다음 중 재밌고 내용이 알찬 강좌를 모두 골라주세요.</p>

<form>

<input type="checkbox" name="lecture" value="html" checked> HTML <br>

<input type="checkbox" name="lecture" value="css"> CSS <br>

<input type="checkbox" name="lecture" value="java"> JAVA <br>

<input type="checkbox" name="lecture" value="cpp" disabled> C++

</form>

>> 결과

파일 선택 : <input> 태그 file 속성 (파일 전송받기)

<h1>파일 선택 박스</h1>

<p>여러분이 가장 행복했던 날의 사진을 선택해 주세요.</p>

<form>

<input type="file" name="upload_file" accept="image/*">

</form>

>> 결과

출처 : TCP스쿨