表单 Form | Notion

示例

<form method="GET" action="">
  <p>
    用户名：<input type="text" name="username" />
  </p>
  <p>
    密码：<input type="password" name="password" />
  </p>
  <p>
    <input type="button" value="登录" />
  </p>
</form>

label

label、input 联动：

label:for ⇒ input:id

<form method="GET" action="">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />
  <br />
  <label for="password">密码：</label>
 	<input type="password" name="password" />
  <p>
    <input type="button" value="登录" />
  </p>
</form>

radio

name: 用来把多个 input 分成一组单选
value: 值

<form method="GET" action="">
	<input
         type="radio" 
         id="male" 
         name="sex" 
         checked="checked"
         value="male" />
  <label for="male">男士</label>
  <input 
         type="radio" 
         id="female" 
         name="sex"
         value="female" />
  <label for="female">女士</label>
</form>

checkbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" method="get">
    <input
      type="checkbox"
      id="java"
      name="language"
      value="java">
    <label for="java">Java</label>
    <input
      type="checkbox"
      id="php"
      name="language"
      value="php">
    <label for="php">PHP</label>
    <input type="submit" value="提交">
  </form>
</body>
</html>

select

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" method="get">
    <select name="lang">
      <option value="">请选择</option>
      <option value="js">JavaScript</option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
    </select>
    <input type="submit" value="提交">
  </form>
</body>
</html>

textarea

cols 可见宽度公式：8px(英文字符) * cols + 17px(滚动条宽度)【只是个近似值】
rows 可见行数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" method="get">
    <textarea id="context" name="context" cols="30" rows="10"></textarea>
    <input type="submit" value="提交">
  </form>
</body>
</html>

⭐️ 不要换行写，否则会导致有空格

因为 textarea 是在标签之间写内容，所以换行也会被当做内容，只不过内容是空白的。