chapter14: HTML表单 - Githubissues

zilongxuan001 commented 6 years ago

表单

表单定义

表单，是用户填写页面表单后，信息会提交到服务器保存。

表单实际上就是一个包含输入域的Web页面，允许输入信息。提交表单时，这些信息会打包并发送到一个Web服务器，由一个服务器脚本主处理。处理完成后，会得到另一个Web页面作为响应。

来源：《Head First HTML 与 CSS》(中文第二版)P646

CHANGELOG： 20180626写问题 20180702补充

表单浏览器中如何工作

1.浏览器加载页面。

用户输入数据

提交表单

4.服务器响应。

来源：《Head First HTML 与 CSS》(中文第二版)P647

CHANGELOG： 20180626写问题 20180702补充

表单内容都由哪些组成？

表单内容组成

段落文字 2.控件

来源：《Head First HTML 与 CSS》(中文第二版)P649

CHANGELOG： 20180626写问题 20180702补充

表单里可以放什么元素？

表单里几乎可以放任何元素。

来源：《Head First HTML 与 CSS》(中文第二版)P652

CHANGELOG： 20180626写问题 20180702补充

表单使用什么布局？

表单使用表格布局，每个单元格对应一个块元素。

在HTML文档中

<form>
     <div class="tabelRow">
     </div>
     <div class="tabelRow">
     </div>
     <div class="tabelRow">
     </div>
</form>

在CSS文档中

form {
     display: table;
}

tableRow {
     display: table-row;
}

来源：《Head First HTML 与 CSS》(中文第二版)P682

CHANGELOG： 20180628写问题 20180702补充

zilongxuan001 commented 6 years ago

术语：控件

控件，是表格的重要组成单元。

比如单选框，复选框，下拉框，选择时间，选择颜色等等。

控件就是类似按钮、文本输入框或下拉菜单之类的工具，允许你输入数据。

来源：《Head First HTML 与 CSS》(中文第二版)P647

CHANGELOG： 20180626写问题 20180702补充

zilongxuan001 commented 6 years ago

form元素组成？

<form>元素包含构成表单的所有元素，并告诉浏览器当你提交表单时要把表单数据发送到哪里（以及浏览器使用说明方法发送数据）

<form type=""  url=""></form>

举例

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">

action属性包括Web服务器的URL，http://wickedlysmart.com；脚本所在的文件夹，hfhtmlcss；处理表单数据的服务器脚本的文件名，contest.php。

method属性确定表单数据如何发送到服务器，这里使用POST方法。

来源：《Head First HTML 与 CSS》(中文第二版)P650

CHANGELOG： 20180626写问题 20180702补充

zilongxuan001 commented 6 years ago

input元素

`<input>`在表单里都有什么功能？形式如何？

输入框

text<input>元素用于输入一行文本，可设置输入的最大字符个数和宽度。

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

提交输入

submit <input>元素会闯将一个按钮，允许你提交表单。点击按钮时，浏览器会把表单发到服务器脚本进行处理。

<input type="submit">

单选按钮

radio<input>元素会创建包含多个按钮的控件，但是一次只能选择其中一个按钮。

关联的单选按钮必须有相同的type和name。

<input  type="radio"  name="hotornot" value="not" >

复选框输入

checkbox<input>会创建一个复选框控件，可以选中也可以不选中。关联的复选框必须有相同的type和name。
<input  type="checkbox"  name="spice"  value="Salt" >
<input  type="checkbox"  name="spice"  value="Pepper" >
<input  type="checkbox"  name="spice"  value="Garlic" >

来源：《Head First HTML 与 CSS》(中文第二版)P652-653

CHANGELOG： 20180626写问题 20180703补充答案

`<input>`元素后为什么要加`<br>`?

因为<input>元素是内联元素，如果不加<br>，<input>会放置在一行内。

来源：《Head First HTML 与 CSS》(中文第二版)P664

CHANGELOG： 20180626

zilongxuan001 commented 6 years ago

textarea元素

<textarea>在表单里都有什么功能？形式如何？

<textarea>在表单里可以实现多行文字输入

可以用CSS限定文本区的宽度和高度

rows属性告诉浏览器文本区高度为多少个字符

cols属性告诉浏览器文本区宽度为多少个字符

<textarea>和</textarea>之间可以填写文本，该本文本会成为浏览器文本区控件中的初始文本。

<textarea name="comments" rows="10" cols="48"></textarea>

来源：《Head First HTML 与 CSS》(中文第二版)P654

CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

select元素

<select>在表单里都有什么功能？形式如何？

<select>和<option>合用，实现下拉框的菜单功能。

<select name="characters">
           <option value="Buckaroo">Buckaroo Banzai</option>
           <option value="Tommy">Perfect Tommy</option>
           <option value="Penny">Penny Priddy</option>
</select>

来源：《Head First HTML 与 CSS》(中文第二版)P655 CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

option元素

`<option>`在表单里都有什么功能？形式如何？

<option>和<select>连用，实现下拉框功能。<option>相当于菜单选项。

<option>元素的内容用作为菜单项的描述。每个菜单选项还可以包含表示这个菜单项的值。

<select name="characters">
           <option value="Buckaroo">Buckaroo Banzai</option>
           <option value="Tommy">Perfect Tommy</option>
           <option value="Penny">Penny Priddy</option>
</select>

来源：《Head First HTML 与 CSS》(中文第二版)P654 CHANGELOG： 20180626写问题 20180703写答案

`<select>`的name和`<option>`的value是如何传到服务器？

举例说明

<select name="beans">
            <option value="Guatemala">Organic Guatemala</option>           
</select>

Organic Guatemala会作为下拉标签显示在HTML页面中。

浏览器会将<select>的name和<option>的value打包，形成beans=Guatemala，发送给服务器。

来源：《Head First HTML 与 CSS》(中文第二版)P666 CHANGELOG：20180626

zilongxuan001 commented 6 years ago

数字输入

如何实现数字输入？

number<input>元素会限制只能输入数字，可设置允许的最小数和最大数。

举例 <input type="number" min="0" max="20" step="5">

min和max控制输入的最小数和最大数

step用来指定间隔数。

来源：《Head First HTML 与 CSS》(中文第二版)P656，HTML5新输入类型 CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

范围输入

如何实现范围输入？

range <input>元素会显示一个滑动条。

<input type="range" min="0" max="20" step="5">

number和range都可以设置step，用来指定间隔数。

来源：《Head First HTML 与 CSS》(中文第二版)P656，HTML5新输入类型 CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

颜色输入

如何实现颜色输入？

使用color<input>可以指定一个颜色，单击该控件，会出现一个颜色选择器，允许你输入一个颜色。

<input type="color">

来源：《Head First HTML 与 CSS》(中文第二版)P656，，HTML5新输入类型 CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

日期输入

如何实现日期输入？

使用date<input>元素时，可以利用一个日期选择控件指定日期。控件会创建一个合法的日期格式串，发送到服务器脚本。

<input type="date">

来源：《Head First HTML 与 CSS》(中文第二版)P657，，HTML5新输入类型 CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

email输入

如何实现email输入？

email<input>元素是一个文本输入元素，在一些移动浏览器上，输入email时会得到一个输入email的定制键盘。

<input type="email">

来源：《Head First HTML 与 CSS》(中文第二版)P657，，HTML5新输入类型 CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

url输入

如何实现url输入？

url<input>元素是一个文本输入元素，在一些移动浏览器上，输入url时会得到一个定制键盘。

<input type="url">

来源：《Head First HTML 与 CSS》(中文第二版)P657，，HTML5新输入类型 CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

tel输入

如何实现tel输入？

tel<input>元素是一个文本输入元素，在一些移动浏览器上，输入tel时会得到一个定制键盘。 <input type="tel">

来源：《Head First HTML 与 CSS》(中文第二版)P657，，HTML5新输入类型

CHANGELOG： 20180626写问题 20180703写答案

zilongxuan001 commented 6 years ago

name

表单元素名name如何工作？

表单元素名name是后台服务程序中的标签，后台服务程序会根据name的不同，进行分类。所以，name不是随便写的，是后台服务程序先编辑了标签名称（即‘name’值），HTML文档才有name的值。

表单中的每个输入控件都有一个name属性，指定唯一的名字。

提交表单时，浏览器会使用这些唯一的名字打包所有数据。

形式

name的值 = 输入的文本

来源：《Head First HTML 与 CSS》(中文第二版)P662

CHANGELOG： 20180627写问题 20180703写答案

name如何与表单数据对应？

每个表单元素都有一个name，每个元素都有一个相应的值。单击提价按钮时，浏览器会拿到所有的name和响应的值，把它们发送给服务器。

举例，name为zip的text <input>元素中输入了邮政编码“90050”，表单提交时，浏览器会把zip=90050发送到服务器。

来源：《Head First HTML 与 CSS》(中文第二版)P663

CHANGELOG： 20180627写问题 20180703写答案

为什么`<option>`元素没有name属性？其他表单元素都有name属性？

因为<option>是菜单的一部分，而<select>已经带上name属性。

来源：《Head First HTML 与 CSS》(中文第二版)P663

CHANGELOG： 20180627写问题 20180703写答案

为什么单选按钮或复选框的name要一样？

因为需要让浏览器知道这些单选按钮或复选框属于同一组。

来源：《Head First HTML 与 CSS》(中文第二版)P663

CHANGELOG： 20180627写问题 20180703写答案

zilongxuan001 commented 6 years ago

提交按钮

提交按钮形式

<input type="submit">

来源：《Head First HTML 与 CSS》(中文第二版)P652 CHANGELOG： 20180627写问题 20180703写答案

提交按钮如何实现其他文本？

可以通过value值实现其他文本。

<input type="submit" value="order now">

来源：《Head First HTML 与 CSS》(中文第二版)P663 CHANGELOG： 20180627写问题 20180703写答案

zilongxuan001 commented 6 years ago

文本输入限制

可以限制<input>和<textarea>的文本输入吗，如何限制？

<input>可以限制文本输入的行数。

<input maxlength="100"> 会限制用户只能设置100个字符。

<textarea>无法限制文本输入的行数。

来源：《Head First HTML 与 CSS》(中文第二版)P663

CHANGELOG： 20180627写问题 20180703写答案

zilongxuan001 commented 6 years ago

tel、email、url和text输入类型的元素的区别

tel、email、url和text没有什么区别，不过标签会不一样。

在一些移动端浏览器中，tel、email、url会有定制键盘，方便输入。

来源：《Head First HTML 与 CSS》(中文第二版)P663 CHANGELOG： 20180627写问题 20180703写答案 20180704补充

zilongxuan001 commented 6 years ago

单选按钮

单选按钮的形式是什么？

<input>的type类型为radio，name要一样。

举例

<input type=“radio” name="beantype" value="whole">Whole bean <br>
<input type="radio" name="beantype" value="ground">Ground

来源：《Head First HTML 与 CSS》(中文第二版)P668

CHANGELOG： 20180628写问题

如何设置默认选项

在<input>中添加布尔属性checked，即可默认选该值。

举例默认选Gound

<input type=“radio” name="beantype" value="whole">Whole bean <br>
<input type="radio" name="beantype" value="ground" checked>Ground

来源：《Head First HTML 与 CSS》(中文第二版)P670

CHANGELOG： 20180628写问题

zilongxuan001 commented 6 years ago

复选框

复选框的形式是什么？

<input>的type类型为checkbox，name要一样。

举例

<input type=“checkbox” name="extras[]" value="giftwrap">Gift wrap <br>
<input type="checkbox" name="extras[]" value="catalog">Include catalog with order

来源：《Head First HTML 与 CSS》(中文第二版)P673

CHANGELOG： 20180628写问题

如何设置默认选项

在<input>中添加布尔属性checked，即可默认选该值。

举例默认选Include catalog with order

<input type=“checkbox” name="extras[]" value="giftwrap">Gift wrap <br>
<input type="checkbox" name="extras[]" value="catalog" checked>Include catalog with order

来源：《Head First HTML 与 CSS》(中文第二版)P673

CHANGELOG： 20180628写问题

zilongxuan001 commented 6 years ago

POST

POST的任务是什么？方法是什么？

举例在HTML中，将<form>的method设置为POST

form action="http://starbuzzcoffee.com/processorder.php" method="POST">

在HTML页面的表格中填写如下数据，

点击“Order Now”后，浏览器的URL地址为

http://starbuzzcoffee.com/processorder.php

来源：《Head First HTML 与 CSS》(中文第二版)P678

CHANGELOG： 20180628写问题

何时使用POST?

发送订单时。
不希望用户加书签
不希望用户看到书签，如信用卡等隐私信息。
使用<textarea>时，要使用POST，因为<textarea>有大量数据，POST对数据量比较宽松。来源：《Head First HTML 与 CSS》(中文第二版)P679

CHANGELOG： 20180628写问题

zilongxuan001 commented 6 years ago

GET

GET的任务是什么？方法是什么？

举例在HTML中，将<form>的method设置为GET <form action="http://starbuzzcoffee.com/processorder.php" method="GET">

在HTML页面的表格中填写如下数据，

点击“Order Now”后，浏览器的URL地址为

http://starbuzzcoffee.com/processorder.php?beans=House+Blend&beantype=ground&bags=2&date=2018-06-28&extras%5B%5D=catalog&name=Bucaroo+Banzai&address=Banzai+Institute&city=Los+Angeles&state=CA&zip=90050&phone=3105551212&comments=GOOD

来源：《Head First HTML 与 CSS》(中文第二版)P678 CHANGELOG： 20180628写问题

何时使用GET?

希望用户加书签时
GET对数据发送，比POST严格。

来源：《Head First HTML 与 CSS》(中文第二版)P679

CHANGELOG： 20180628写问题

zilongxuan001 commented 6 years ago

`<label>`

label的作用

为控件加上标签，增加可访问性。

提供更多的页面结构信息。

方便使用CSS对标签使用样式。

方便视力有障碍的人。

举例

要使用<label>元素，首先为其增加id属性。

在增加一个<label>，设置其for属性和id要一致。

<input type="radio" name="horornot" value="hot" id ="hot">
<label for="hot">hot</label>

<input type="radio" name="horornot" value="not" id ="not">
<label for="not">not</label>

来源：《Head First HTML 与 CSS》(中文第二版)P688

CHANGELOG：

20180628 写问题； 20180702 写答案 20180703补充

任何表单控件都可以使用label吗？

任何表表单控件都可以使用label。

来源：《Head First HTML 与 CSS》(中文第二版)P688

CHANGELOG：

20180628 写问题； 20180702 写答案

label在单选按钮和复选框使用的中注意事项

label要保持一致，同一组内设置的id要唯一。

举例

<input type="radio" id="whole_beantype" name="beantype" value="whole">
         <label for="whole_beantype">Whole bean</label><br>

<input type="radio" id="ground_beantype" name="beantype" value="ground">
         <label for="ground_beantype">Ground</label>

来源：《Head First HTML 与 CSS》(中文第二版)P688

CHANGELOG：

20180628写问题； 20180702写答案。 20180703补充答案

zilongxuan001 commented 6 years ago

`<fieldset>`和`<legend>`

使用<fieldset>和<legend>，可以对元素进行分组，把公共元素组织在一起。

举例

<fieldset>
          <legend>Condiments</legend>
                  <input type="checkbox" name="spice" value="salt">
                  Salt</br>
                 <input type="checkbox" name="spice" value="pepper">
                  Pepper</br>
                 <input type="checkbox" name="spice" value="garlic">
                  Garlic            
</fieldset>

浏览器显示

来源：《Head First HTML 与 CSS》(中文第二版)P689

CHANGELOG： 20180628写问题。 20180703写答案

zilongxuan001 commented 6 years ago

`<passwords>`

输入密码，如果使用<passwords>，输入的字数或数字会用黑点实圆遮盖。

<input type="password" name="secret">

来源：《Head First HTML 与 CSS》(中文第二版)P689

CHANGELOG： 20180628写问题 20180703写答案

zilongxuan001 commented 6 years ago

文件输入

可以往浏览器传文件，type设置成file，且<form>的method必须是POST

<input type="file" name="doc">

来源：《Head First HTML 与 CSS》(中文第二版)P690

CHANGELOG： 20180628 写问题 20180703写答案

zilongxuan001 commented 6 years ago

多选菜单元素

为<select>增加布尔属性multiple，则下拉菜单可以变成多选裁断，使用Ctrl，可以选择多个选项。

<select name="characters" multiple>
        <option value="Buckaroo">Buckaroo Banzai</option>
        <option value="Tommy">Perfect Tommy</option>
        <option value="Penny Priddy">Penny</option>

</select>

来源：《Head First HTML 与 CSS》(中文第二版)P690

CHANGELOG： 20180628写问题

zilongxuan001 commented 6 years ago

placeholder

提示符，会提示该输入什么文字。

<input>元素可以使用placeholder属性。

<input type="text" placeholder="Buckaroo Banzai">

来源：《Head First HTML 与 CSS》(中文第二版)P691

CHANGELOG： 20180628写问题； 20180702写答案 20180703补充答案

zilongxuan001 commented 6 years ago

`required`

required是要求必填，适用于任何一个表单控件。

<input type="text" placeholder="Buckaroo Banzai" required>

来源：《Head First HTML 与 CSS》(中文第二版)P691

CHANGELOG： 20180628写问题 20180702写答案 20180703补充答案

zilongxuan001 / LearnFreecode

chapter14: HTML表单 #344

表单

表单定义

表单浏览器中如何工作

表单内容都由哪些组成？

表单里可以放什么元素？

表单使用什么布局？

术语：控件

form元素组成？

input元素

<input>在表单里都有什么功能？形式如何？

输入框

提交输入

单选按钮

复选框输入

<input>元素后为什么要加<br>?

textarea元素

select元素

option元素

<option>在表单里都有什么功能？形式如何？

<select>的name和<option>的value是如何传到服务器？

数字输入

范围输入

颜色输入

日期输入

email输入

url输入

tel输入

name

表单元素名name如何工作？

name如何与表单数据对应？

为什么<option>元素没有name属性？其他表单元素都有name属性？

为什么单选按钮或复选框的name要一样？

提交按钮

提交按钮形式

提交按钮如何实现其他文本？

文本输入限制

tel、email、url和text输入类型的元素的区别

单选按钮

单选按钮的形式是什么？

如何设置默认选项

复选框

复选框的形式是什么？

如何设置默认选项

POST

POST的任务是什么？方法是什么？

何时使用POST?

GET

GET的任务是什么？方法是什么？

何时使用GET?

<label>

label的作用

任何表单控件都可以使用label吗？

label在单选按钮和复选框使用的中注意事项

<fieldset>和<legend>

<passwords>

文件输入

多选菜单元素

placeholder

required

`<input>`在表单里都有什么功能？形式如何？

`<input>`元素后为什么要加`<br>`?

`<option>`在表单里都有什么功能？形式如何？

`<select>`的name和`<option>`的value是如何传到服务器？

为什么`<option>`元素没有name属性？其他表单元素都有name属性？

`<label>`

`<fieldset>`和`<legend>`

`<passwords>`

`required`