FORM 表单相关

FORM 表单相关

Form标签的action属性是一个表单当中必须的属性，action属性规定当提交表单时，向[get][set]或其他方向发送表单数据。

<br> 手动换行。
<p></p> 带自动换行
<input> 标签内元素的text类型创建基础的单行文本框。

表単/提交(form)

概要	键入类型	Code
开启表单		<form action="送信先"method="get/post"name="firstform"> </form>
提出种类	文字框	<input type="text">
	单选按钮	<input type="radio">
	多选按钮	<input type="checkbox">
	下拉选单	<select> <option>A</option> <option>B</option> </select>
	複数行入力	<textarea></textarea>

<input> placeholder 属性

• 提供可描述输入字段预期值的提示信息（hint）

• 该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
  輸入框提示文字(文字入力したら消す)
  <input　type="text"　 placeholder="文字入力">
  提出框提示文字(文字入力したら入力した文字が後ろに追加)
  <input type="text" value="文字入力">

  <input> value属性
  带有初始默认值的 HTML 表单：
  value 属性规定 <input> 元素的值。
  value 属性对于不同 input 类型，用法也不同：

  • 对于 button、reset、submit 类型 - 定义按钮上的文本
  • 对于 text"、password、hidden 类型 - 定义输入字段的初始默认值
  • 对于 checkbox、radio、image 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

单选按钮<input type="radio">

单选按钮的グループ(グループ内のその中一つ選んだらほかのボタンの選択は消す)

• name=“???” 是group的属性
• 送信される値 value=“???”
• 黙認選択 checked
  選択できない(活性化してない) disabled

<input type="radio" name="gander" value="man" checked>男
<input type="radio" name="gander" value="feman">女
<input type="radio" name="gander" value="else" disabled>

多选按钮 <input type="checkbox">

Checkbox 对象代表一个HTML表单中的一个选择框。
多選ボタンのグループ name=“???”

<input type="checkbox" name="color" value="red">赤
<input type="checkbox" name="color" value="blue">青
<input type="checkbox" name="color" value="yellow">黄

• 如果想要不是只按按鈕而是按文字也可選擇
  • 在按鈕上新增id
  • 加一個<lable>
  • 在<lable>里加for跟按鈕的id连接,表示ID的走向.

<input type="radio" name="ABC" value="A"> 
<input type="radio" name="ABC" value=“a” id=“🆔”>
<label for=“🆔”>A</label>

<select> multiple 属性

所有主流浏览器都支持 multiple 属性。

• 定义和用法
  multiple 属性是一个布尔属性。
  multiple 属性规定可同时选择多个选项。
• 在不同操作系统和浏览器中，选择多个选项的差异：
  1. 对于 windows：按住 Ctrl 按钮来选择多个选项
  2. 对于 Mac：按住 command 按钮来选择多个选项

由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

下拉选单プルダウン

<select>
  <option>A</option>
  <option>B</option>
</select>

下拉选单各种属性
默认选择selected

<select mutiple>
  <option value="A">A</option>
  <option value="B" selected>B</option>
  <option value="O">O</option>
  <option value="AB">AB</option>
</select>

• 多選(按住shift操作) mutiple

複数行テキスト入力欄を作る<textarea></textarea>标签

<textarea name="message">メッセージを入力</textarea>
<textarea name="message" placeholder="メッセージを入力"></textarea>
<textarea cols="20" rows="5" maxlength="50" style="resize: none;"></textarea>

• 提示文字(文字入力したら消す)
  <textarea placeholder="展示"></textarea>

• 要在同一行,提示文字(文字入力したら入力した文字が後ろに追加)
  <textarea>文字展示</textarea>

文字展示

• 可輸入最大字符 maxlength=“?”
  <textarea placeholder="展示" maxlength="10" cols="10" rows="10"></textarea>

按钮

按钮	代码
单纯按钮	<input type="button" value="按钮">
提交	<input type="submit">
清空/还原	<input type="reset">

• submit按鈕跟<form>的action="送信先" method="get/post"
  1. 當你選擇/輸入了值,然後按submit按鈕提出後,它會把提交的值提交到action所指定的地址裡。
  2. Method get的話,在所指定的地址的網址上會顯示你所提交的值。(用於検索之類的)
  3. Method post的話,在所指定的地址的網址上不會顯示你所提交的值。(用於提交用戶名,密碼類)