HTML Forms & Tables

Udemy의 Web Developer Bootcamp 강의를 듣고 HTML부분을 정리

HTML : Forms & Tables

• HTML Tables

  • data table, two dimensional rows and column structure

• Tables: TR, TD, and TH Elements

  • <td> : single cell in a table that contains data.
  • <tr>: talbe row, a row of cells in a table.
  • <th>: table heading or header. bolded by default

• Tables: Thead, Tbody, and Tfoot Elements

  • <thead>,<tfoot>,<tbody>

• Tables: Colspan & Rowspan

  • use to resize and to have different headers or even different cells that span across not just a single row or a single column

• The Form Element

  • itself is a shell or container that doesn't have any visual impact
  • We then fill the form with a collection of inputs, checkboxes, buttons, etc.
  • The form element "represents a document section containing interactive controls for submitting information."
  • The action attribute specifies WHERE the form data should be sent.
  • The method attribute specifies which HTTP method should be used (don't worry about this for now)

• Common Input Types

  • The input element is used to create a variety of different form controls.
  • 20+ possible types of inputs, ranging from date pickers to checkboxes.
  • The type attribute is where the magic happens. Changing type dramatically alters the input's behavior and appearance.
  • text, password, color, number,

• The All-Important Label

  • label element actually associates there's a direct connection between some input or some form control and some piece of text.HTML Buttons
  • make connection from a label to an input is by using id and for

• HTML Buttons

  • a button inside of a form, the default behavior will be to submit that form
  • button type won't submit the form
  • value attribute change the text inside the button

• The Name Attribute

  • will be used when our data is sent

• "Hijacking" Google & Reddit's Search

  • build our own search form and send data to their server from our form

  <form action="https://www.reddit.com/search">
  	<input type="text" name="q">
  	<button>search</button>
  </form>

• Radio Buttons, Checkboxes, & Selects

  • Radio Buttons :
    • can only select one
    • group options with name attribute
    • value will be sent to the server
  • Selects :
    • drop down menu
    • add options with <option>
    • value will be sent to the server

• Range & Text Area

  • Range
    • create a slider that a user can select some value on a sliding range
    • min, max, step, value(initial value) attributes
  • Text Area
    • not an input tag type
    • multi-line text input
    • can control initial number of rows

• HTML5 Form Validations

  • minlength, required, maxlength attributes
  • can set our own attribute with pattern attribute and regular expresstion

  HTML의 form을 다시 배우면서 서버에 어떻게 요청을 보내는지에 대한 원리에 대해 다시 공부해 보는 계기가 되었다. React나 Vue같은 프레임워크에서는 id, for 이런 속성없이 상태변수들을 많이 이용했어서 HTML의 기본 폼의 원리에 대해 많이 잊었던 것 같다. 이번 강의에서 HTML을 통해 데이터를 어떻게 보내는지 다시 한번 생각해 보게 되었다.