2020年2月14号--HTML学习笔记（三）

2020年2月14号–HTML学习笔记（三）

HTML <form> 标签

表单是一个包含表单元素的区域。 表单元素 是允许用户在表单中输入内容，比如：文本域(textarea) 、下拉列表 、单选框 、复选框 等等。
HTML 表单用于收集不同类型的用户输入。

HTML <form> 属性

HTML 表单常用属性有：action、method、enctype。

1. HTML <form> action 属性
   action 属性规定当提交表单时，向何处发送表单数据。
2. HTML <form> method 属性
   method 属性方法规定如何发送表单数据（表单数据会被发送到在 action 属性中规定的页面中）。
   method 属性值有：get（默认）或 post。
   关于 get 和 post 的区别：
   get： 以查询字符串形式提交，在地址栏中能看到，长度有限制，不安全。
   post： 以表单数据组形式提交，在地址栏中看不到，长度无限制，安全。
3. HTML <form> enctype 属性
   enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。
   注意： 只有 method="post" 时才使用 enctype 属性。
   enctype 属性值有：
   application/x-www-form-urlencoded：默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）。
   multipart/form-data：不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

HTML 表单输入元素

多数情况下被用到的表单标签是输入标签（<input>）。 输入类型是由类型属性（type）定义的。
大多数经常被用到的输入类型有文本框、密码字段、单选按钮、复选框、提交按钮。

4. HTML 表单文本框
   文本框通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。

5. HTML 表单密码字段
   密码字段通过标签 <input type="password"> 来定义。

6. HTML 单选按钮
   <input type="radio"> 标签定义了表单单选框选项。

7. HTML 表单复选框
   <input type="checkbox"> 定义了表单复选框。用户需要从若干给定的选择中选取一个或若干选项。

8. HTML 表单提交按钮
   <input type="submit"> 定义了提交按钮。
   实例：

<form action="html_form_action.php" method="get" name="myForm">
  Username: <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

假如您在上面的文本框内键入几个字母，然后点击提交按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。
表单提交后，会使用服务端语言（如 PHP）进行数据处理。

HTML特殊表单元素

1. HTML 下拉列表
   <select> 标签定义了下拉选项列表。
   <select> 元素中的 <option> 标签定义了列表中的可用选项。
2. HTML 文本域
   <textarea> 标签定义文本域（一个多行的输入控件）。
   我们可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小。
   cols 属性规定了文本区域内可见的宽度，rows 属性规定了文本区域内可见的高度（以行数计）。

HMTL其他表单元素

3. HTML <label> 标签
   <label> 标签定义了 <input> 元素的标签，一般为输入标题。
   <label> 标签的 for 属性应当与相关元素的 id 属性相同。
   实例：带有两个输入字段和相关标记的 HTML 表单。

<form action="/statics/demosource/demo-form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

4. HTML <button> 标签
<button> 标签定义一个按钮。
在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
<button> type 属性值有：
submit：该按钮是提交按钮（除了 IE 浏览器，该值是其他浏览器的默认值）。
button：该按钮是可点击的按钮（IE 浏览器的默认值）。
reset：该按钮是重置按钮（清除表单数据）。
5. HTML <fieldset> 和 <legend> 标签
<fieldset> 标签定义了一组相关的表单元素，并使用外框包含起来。
<legend> 标签定义了 <fieldset> 元素的标题。
实例： 组合表单中的相关元素。

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br><br>
    Telephone: <input type="text"><br><br>
    Email: <input type="text">
  </fieldset>
</form>