Day 40     task10-1

今天完成的事情

        开始task10

遇到的问题

       学习表单知识 ，阅读资料，没有什么问题

收获

      HTML表单

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

input元素

<input type="text"> 定义用于文本输入的单行输入字段：

<form>

 First name:<br>

<input type="text" name="firstname">

<br>

 Last name:<br>

<input type="text" name="lastname">

</form>

<input type="password"> 定义密码字段：

注释：password 字段中的字符会被做掩码处理（显示为星号或实心圆）

<input type="radio"> 定义单选按钮。

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form> 

<input type="checkbox"> 定义复选框。

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike

<br>

<input type="checkbox" name="vehicle" value="Car">I have a car 

</form> 

<input type="file">用于文件上传。

<input type="image" /> 定义图像形式的提交按钮。

<input type="image" src="submit.gif" alt="Submit" />

<input type="reset" /> 定义重置按钮。重置按钮会清除表单中的所有数据。

<input type="number"> 用于应该包含数字值的输入字段。您能够对数字做出限制。

<form>

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5">

</form>

输入限制

新增html表单元素

<input type="date"> 用于应该包含日期的输入字段。

根据浏览器支持，日期选择器会出现输入字段中。您可以向输入添加限制：

<form>

  Enter a date before 1980-01-01:

  <input type="date" name="bday" max="1979-12-31"><br>

  Enter a date after 2000-01-01:

  <input type="date" name="bday" min="2000-01-02"><br>

</form>

<input type="color"> 用于应该包含颜色的输入字段。

根据浏览器支持，颜色选择器会出现输入字段中。

<form>

  Select your favorite color:

  <input type="color" name="favcolor">

</form>

<input type="range"> 用于应该包含一定范围内的值的输入字段。

根据浏览器支持，输入字段能够显示为滑块控件。

<form>

  <input type="range" name="points" min="0" max="10">

</form>

<input type="month"> 允许用户选择月份和年份。

<form>

  Birthday (month and year):

  <input type="month" name="bdaymonth">

</form>

<input type="week"> 允许用户选择周和年。

<input type="time"> 允许用户选择时间（无时区）。

<input type="datetime"> 允许用户选择日期和时间（有时区）。

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

<input type="email"> 用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

<input type="url"> 用于应该包含 URL 地址的输入字段。

根据浏览器支持，在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

<input type="submit">定义提交表单数据至表单处理程序的按钮。

表单处理程序（form-handler）通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<form action="action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form> 

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

<select> 元素（下拉列表）

定义下拉列表：

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

<option> 元素定义待选择的选项。

<textarea> 元素

定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">  cols规定每行的字符数? rows规定行数

The cat was playing in the garden.

</textarea>

<button> 元素

定义可点击的按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML表单属性

Action 属性

是在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页，即指定某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性

规定在提交表单时所用的 HTTP 方法

GET（默认方法） 表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的：

<form action="action_page.php" method="GET">

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

或 POST 如果表单正在更新数据，或者包含敏感信息（例如密码）。：

<form action="action_page.php" method="POST">

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

本例只会提交 "Last name" 输入字段：

<form action="action_page.php">

First name:<br>

<input type="text" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form> 

HTML Form 属性

HTML <form> 元素，已设置所有可能的属性

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form>

  <label for="male">Male</label>

  <input type="radio" name="sex" id="male" />

  <br />

  <label for="female">Female</label>

  <input type="radio" name="sex" id="female" />

</form>

form 属性规定 label 所属的一个或多个表单。

form 属性的值必须是其所属的表单的 id。

如需引用一个以上的表单，请使用空格分隔的列表。

<form action="demo_form.asp" method="get" id="genderform">

<label>Male

<input type="radio" name="sex" id="male" value="male" />

</label>

<br />

<label>Female

<input type="radio" name="sex" id="female" value="female"  />

</label>

<input type="submit" value="提交" />

</form>

<p>用于第一个单选按钮的 label 位于 form 元素之外，但仍然是表单的一部分。请尝试点击这个 label，可以切换到 radio 控件。</p>

<label for="male" form="nameform">Male</label>

明天计划学习

       开始task10

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决