input 3

[JS] 자바스크립트 <input> : id와 name

리액트 공부를 하다 어쩌면 당연할 수도 있지만 생각지도 못했던 엥? 싶었던 부분이 있어서 글을 남겨보려고 한다. 🤔 form 태그 중 을 사용할 때 id와 name 속성을 지정하는데 name과 id 둘 모두 element를 식별? 참조하기 위해 사용된다. 여기서 name 속성은 form이 제출될 때 서버에 폼 값을 넘겨주기 위해 사용한다. (굳이 서버로 넘기지않은 값에는 name을 생략해도 무방하다,,!) 당연히 id는 유일한 값으로 사용되어야 하기 때문에 중복이 안되고, name은 중복이 가능한 값이다. 바로 여기서 오늘 적어보려는 주제가 등장한다! (아래 코드는 리액트 공부를 하며 작성하던 코드라 조금 다르다,,,!) const root = document.getElementById("root"); ..

JS/Javascript 2021.09.03

[HTML/CSS] <input> 태그 : #2 로그인 폼(Login Form)

이전에 태그의 유형과 속성에 대해 알아봤다. 오늘은 text 타입, password 타입, submit 타입으로 간단한 로그인 폼을 만들어 보자. LOGIN TO YOUR ACCOUNT LoginForm.emayom.repl.co 'Login Form'으로 구글링을 해보면 다양한 시안을 찾아볼 수 있다! input의 요소들을 비운 채 제출할 수 없도록 하는 것 => required / HTML 자동으로 포커스를 알려주는 것 => autofocus / HTML 포커스가 될 경우에 입력하는 부분은 진하게 표시하는 것 => input:focus / CSS submit 버튼에 마우스를 올리면 색이 진해지는 것 => input:hover / CSS 태그의 하이퍼링크 밑줄 ,,,, 싫어 ,,,, (대신에 커서 바꿔..

HTML 2021.07.21

[HTML] <input> 태그 : #1 유형과 속성

HTML을 작성하다보면 꼭 쓰게 되는 태그 중에 하나가 바로 태그이다. 오늘은 태그의 유형과 속성에 대해 알아보려한다. 해당 태그의 속성만 잘 사용해도 HTML에 작성된 input을 어느 정도 제어할 수 있다! input input 태그는 정보를 입력하기 위해 사용하는 태그이다. 태그의 기본 값은 text이지만, 어떤 유형을 지정해주냐에따라 다양한 형태로 사용할 수 있다. (아래는 repl.it 에 미리 작성해놓은 input type들이다. 링크를 통해 체험해보자! 👇🏻) repl.it inputtype.emayom.repl.co #1 Type 한눈에 파악하기위해 임의로 유형에 따라 묶어서 크게 분류했다 ! 하나씩 알아보자. - button 타입 button submit : 입력한 값들을 전송해주는 버튼..

HTML 2021.07.20