Day10 HTML表单元素

表单是什麽?

表单是用来收集使用者输入的资料，而这些输入的资料通常会被送到网页服务器来处理或储存，或是会直接在使用者介面上被更新(例如: 新增项目到清单、隐藏或显示某些特性)。

参考资料:Your first form Sending form data

表单常用的HTML标签

表单必备的三个要素: form、input、submit

<form>表单标签

和制作表格一样，必须先新增一个表单的标签<form>

form标签属性

<form action="" method="get">
...
</form>

action=" "填写的内容是资料要传送到的目的地
method=" " 填写的内容资料传送到目的地的方式，最常用的是 get 或 post

参考资料: form
HTML Form Attributes

<input> 输入标签

input标签内会有几个常用的属性: type、id、name、placeholder、value...

input id属性

input id属性 会和 label标签的for属性一起搭配使用，用来创造使用者体验

label for=内写的内容 和 input id =内的内容一样的话 ，点选 姓名:的位置 输入栏位会自动被选取起来

input placeholder属性

placeholder 是用来提示使用者在栏位内要输入什麽内容

input name属性

name 属性是用来指定送出去的该笔资料是什麽名称，为的是让远端服务器才能透过定义好的名称来取出对应的栏位值。
有写name这个属性的input标签，所取得的值才会被传到网页的後端去

input value属性

value通常会是空值，但也可以填入想要栏位内预设的内容
使用时机范例:
已经注册会员了，设定无法再更改会员专区的姓名，因为已绑定其他资料，所以会搭配readonly设定成只能观看资料不能更改的状态，或是搭配disabled 使用让预设内容呈现灰色且无法更改和送出。
参考资料:form attributes

搭配readonly设定成只能观看资料不能更改

搭配disabled 使用让预设内容呈现灰色且无法更改和送出

input type 输入类别属性

input标签依照使用者输入的资讯不同，会有不同的类型设定
例如:

• <input type="text" ...> 建立文字输入栏位

• <input type="submit" ...> 建立送出表单的按钮

• <input type="email" ...> 建立输入email栏位
  和type="text"不同，会自动验证是否输入的是email

  

• <input type="tel"> 建立输入电话栏位

• <input type="number"> 建立输入数值栏位
  可以设定数值的范围(min&max)
  新增step 可以设定每次增加和减少的数值
  
  

• <input type="button"> 建立按钮
  和type="submit"不同，只是按钮不会送出资料，需要写JavaScript (绑定click事件用来做功能 ex:删除、重置)

• <input type="checkbox" ...> 建立一个核取方块(多选)
  如果想设定成预设就是勾选好的，只要在input的内容加上checked，就会显示成勾选的状态
  
  

• <input type="radio" ...> 建立一个选项按钮(单选)
  不同於type="checkbox"，radio只能单选
  
  

checkbox可以复选

• <input type = "password"… > 建立输入密码的栏位
  可以用 minlength&maxlength 设定密码最少和和最长输入内容长度
  可以加上required，如果该栏位没有填写内容，就无法送出表单
  
  

相关资料: input types

用select & option制作下拉式选单

select是用来建立下拉式选单
option是用来建立选单内的选项

用textarea 新增可输入多行文字的栏位

cols是用来设定输入栏位的宽度能放多少文字 (characters)
rows是用来设定输入栏位的高度能放几行文字 (lines)

以上为个人学习笔记整理
若有错误，欢迎指正