如何在input输入框中加一个搜索的小图片_前端开发困难重重，如何把握机会学习？...-CSDN博客

第3天【form表单】

主要内容

Form表单
表单元素
表单元素的属性
HTML5新增type类型
HTML新增属性

学习目标

一、Form表单

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

<form action＝"url" method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和post两种，默认为get

post和get区别：

1、数据提交方式，get把提交的数据url可以看到，post看不到

2、get一般用于提交少量数据，post用来提交大量数据

计算机中的位：二进制数系统中，每个0或1就是一个位(bit)，位是数据存储的最小单位。其中8 bit就称为一个字节（Byte）。计算机中的CPU位数指的是CPU一次能处理的最大位数。例如32位计算机的CPU一次最多能处理32位数据。

二、表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

1.表单标签

是指<form>标签本身，它是一个包含表单元素的区域，使用<form></form>定义

2.表单域

是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）

3.表单按钮

用来提交<form>表单中的所有信息到服务器

表单域和表单按钮都属于表单元素

2.1文本框

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

<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

2.2密码框

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

2.3单选按钮

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

2.4复选框

<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>

浏览器显示效果如下:

2.5文件

定义文件选择字段和 "浏览..." 按钮，供文件上传：

选择一个文件: <input type="file" name="img">

2.6隐藏域

定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值：

<input type="hidden" name="country" value="Norway">

2.7提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

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

浏览器显示效果如下:

2.8重置按钮

定义重置按钮（重置所有表单值为默认值）：

<input type="reset">

提示：请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。

2.9按钮

没有任何功能的按钮

<input type="button" value="点我"/>

2.10图像图片按钮

定义图像作为提交按钮：

<input type="image" src="img_submit.gif" />

2.11按钮

<button> 标签定义一个按钮。

在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

2.12下拉列表

<select> 元素用来创建下拉列表。

<option> 标签定义下拉列表中的一个选项（一个条目）。

<select> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<optgroup> 标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

2.13多行文本框

<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea rows="10" cols="30">
我是一个文本框。 
</textarea>

2.14labe

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

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

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

提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

<form action="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>
<input type="submit" value="提交"> 
</form>

三、HTML5新增type类型

3.1email

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

E-mail: <input type="email" name="usremail">

3.2url

定义用于输入 URL 的字段：

添加你的主页: <input type="url" name="homepage">

3.3search

定义搜索字段（比如站内搜索或谷歌搜索等）：

Search Google: <input type="search" name="googlesearch">

3.4tel

定义用于输入电话号码的字段：

电话号码: <input type="tel" name="usrtel">

3.5color

从拾色器中选取颜色：

选择你喜欢的颜色: <input type="color" name="favcolor">

3.6number

定义用于输入数字的字段（您可以设置可接受数字的限制）：

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

请使用下面的属性来规定限制：

max - 规定允许的最大值。

min - 规定允许的最小值。

step - 规定合法数字间隔。

value - 规定默认值。

3.7range

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：

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

请使用下面的属性来规定限制：

max - 规定允许的最大值。

min - 规定允许的最小值。

step - 规定合法数字间隔。

value - 规定默认值。

3.8date

定义 date 控件：

生日: <input type="date" name="bday">

3.9month

定义 month 和 year 控件（不带时区）：

生日 ( 月和年 ): <input type="month" name="bdaymonth">

3.10week

定义 week 和 year 控件（不带时区）：

选择周: <input type="week" name="week_year">

四、HTML5新增属性

4.1autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

      User name: <input type="text" name="user_name"  autofocus />

4.2multiple 属性

multiple 属性规定输入域中可选择多个值。

注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。

Email: <input type="email" multiple />

4.3placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

<input type="search" name="user_search"  placeholder="Search W3School" />

4.4required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

Name: <input type="text" name="usr_name" required />

五、作业