DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Dahye Ji
Dahye Ji

Posted on • Updated on

Tags, Attributes, Form and lebel

HTML Tags

Tags I learnt recently.
<mark> : Highlight
<abbr> : When you hover on the element that's wrapped with <abbr>, it shows description.

You can use CSS to style your HTML.

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Enter fullscreen mode Exit fullscreen mode

<sup> : Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font like H20
<sub> : Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].

<p>H<sub>2</sub>0</p> 
<p>x<sup>2</sup>=4</p>
Enter fullscreen mode Exit fullscreen mode

<blockquote>

I Don’t Have A Home To Go Back To. In Here, I Stand A Chance At Least. But Out There? I Got Nothing Out There.

Player 322

Would you like to play a game with me?He asked.

<blockquote>
    <p>I Don’t Have A Home To Go Back To. In Here, I Stand A Chance At Least. But Out There? I Got Nothing Out There.</p>
    <cite>Player 322</cite>
</blockquote>
<p><q>Would you like to play a game with me?</q>He asked.</p>
Enter fullscreen mode Exit fullscreen mode

<pre> : Preformatted text which is to be presented exactly as written in the HTML file.

<kbd> : Span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

Please press Ctrl + Shift + R to re-render an MDN page.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>
Enter fullscreen mode Exit fullscreen mode

<code>

The push() method adds one or more elements to the end of an array and returns the new length of the array.

<p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>
Enter fullscreen mode Exit fullscreen mode

<figure> : figure tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<figcaption> : defines a caption for a <figure> element. Element can be placed as the first or last child of the element. figcaption can be used only as children element of figure.

srcset Attribute

Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.

Each set of image information is separated from the previous one by a comma.
find more about srcset

<img src="a.jpg" srcset="a.jpg, a.jpg 2x" alt="λŒ€μ²΄λ¬Έκ΅¬">
<img
width="200px"
srcset="img/logo_1.png 300w,
        img/logo_2.png 600w,
        img/logo_3.png 700w"
src="a.jpg"
alt="test">
Enter fullscreen mode Exit fullscreen mode

Attributes

poster: A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

<video src="" poster="" preload="" controls playsinline>
  <source src="" type="">
  <track kind="" src="" srclang="" label="">
</video>
Enter fullscreen mode Exit fullscreen mode

Form

: a document section containing interactive controls for submitting information.

Get, Post

Sensitive info like password should not be seen, so it shouldn't be sent via get. It's better to use post.
Also, it's easier to send large size of image, lots of data via post then get. If it needs to be hidden, use post as well.

<form action="./010.html" method="get">
        <label for="one">이름 : </label>
        <input type="text" name="id" id="one">
        <label for="two">νŒ¨μŠ€μ›Œλ“œ : </label>
        <input type="password" name="pw" id="two">
        <button type="submit">둜그인</button><br>
</form>
Enter fullscreen mode Exit fullscreen mode

It sends the data to the file that action is linked which is ./010.html
When it's sent (when you click submit button this is what you see at the browser file:///Users/dahyeji/Desktop/likelion/01_11_2021/010.html?id=hailey707&pw=12345

You can see πŸ‘‰ ?id=hailey707&pw=12345
/?device(key/name)=iPhone(value)

Label

To associate the <label> with an <input> element, you need to give the an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

<label for="id">아이디: </label>
<input type="text" name="userId" id="id">
Enter fullscreen mode Exit fullscreen mode

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

<label for="male">남</label>
<input type="radio" name="sex" id="male" value="male">
<label for="female">μ—¬</label>
<input type="radio" name="sex" id="female" value="female">
Enter fullscreen mode Exit fullscreen mode
<form action="./011.html" method="get">
        <label for="id">아이디: </label>
        <input type="text" name="userId" id="id">
        <label for="pw">νŒ¨μŠ€μ›Œλ“œ: </label>
        <input type="password" name="userPw" id="pw"><br>
        <label for="male">남</label>
        <input type="radio" name="sex" id="male" value="male">
        <label for="female">μ—¬</label>
        <input type="radio" name="sex" id="female" value="female"><br>

        <p>μ’‹μ•„ν•˜λŠ” ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄</p><br>
        <label for="js">javaScript</label>
        <input type="checkbox" name="μ–Έμ–΄" id="js" value="javaScript">
        <label for="python">python</label>
        <input type="checkbox" name="μ–Έμ–΄" id="python" value="python">
        <label for="python">C</label>
        <input type="checkbox" name="μ–Έμ–΄" id="c" value="c">
        <label for="python">Go</label>
        <input type="checkbox" name="μ–Έμ–΄" id="go" value="go">

        <button type="submit">νšŒμ›κ°€μž…</button>
    </form>
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

<label>Do you like dogs?
  <input type="checkbox" name="dogs">
</label>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

πŸ‘€ Just want to lurk?

You can still create an account and turn on features like 🌚 dark mode.