范仁义html+css课程---7、表单

一、总结

一句话总结：

表单标签的话主要掌握form标签、input标签（以及input标签的不同的type值）、select标签、textarea等标签，及这些标签对应的一些属性

1、form标签的常用属性？

action：指定表单的发送地址（服务器地址）

method:表单数据发送至服务器的方法，常用的有两种：get/post

2、form的get提交方式和post提交方式的区别？

get方法提交：数据会附在网址之后主动提交给服务器

post方法提交：数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理

3、html表单元素中input元素的作用？

用来设置表单中的内容项，比如输入内容的文本框，密码框，选项框，按钮等

4、input标签的type常用类型？

text、password、email、num、checkbox、radio、file、hidden、image、submit、reset 和 button等，默认为 text

5、当input标签的type为radio或checkbox时，指定按钮是否是被选中用什么属性？

checked属性：<input name="gender" type="radio" checked value="男"> 男

6、表单中的隐藏域如何使用？

将input标签的type属性设置为hidden：例如 <input type="hidden" value="666" name="userid">

7、表单元素的readonly属性和disabled属性的作用分别是什么？

readonly属性：只读，不可修改，但是会提交元素数据

disabled属性：只读，不可修改，并且不会提交元素数据

8、如何实现点击label标签自动将焦点转移到与该标注相关的表单元素上？

label元素的for属性的属性值为相关表单元素的id

<div>

    <label for="username">用户名：</label>

    <input type="text" required id="username" name="name" placeholder="用戶名">

</div>

9、表单初级验证的常用方法？

1.placeholder：提示语默认显示，当文本框中输入内容时提示语消失

2.required：规定文本框填写内容不能为空，否则不允许用户提交表单

3.pattern：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单：如 pattern="^1[358]\d{9}"

二、HTML-表单（非常详细）

博客对应视频课程位置：7、表单（2）
https://fanrenyi.com/video/2/13

表单基本介绍

form元素

用来定义一个表单，是建立表单的基础元素，（就类似定义表格的table）
表单的其他元素包含在form元素中，其主要子元素有：input/button/select......

form元素的属性

action：指定表单的发送地址（服务器地址）
method:表单数据发送至服务器的方法，常用的有两种：get/post

get和post提交的区别

get方法提交，数据会附在网址之后主动提交给服务器
post方法提交，数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理

表单语法

<form  method="post"（规定如何发送表单数据      常用值：get|post）

 action="result.html">（表示向何处发送表单数据）

   <p>  名字：<input name="name" type="text" >  </p>

   <p>  密码：<input name="pass" type="password" >  </p>

   <p>

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

      <input type="reset" value="重填“/>

   </p>

</form>

经验：在实际网页开发中通常采用post方式提交表单数据

表单元素格式

语法：

<input  type="text"（input元素类型）name="fname"（input元素名称）

value="text"（input元素的值）/>

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单元素

文本框-语法

<input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

密码框-语法

<input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />

单选按钮-语法

<input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男

<input name="gen" type="radio" value="女" />女

复选框-语法

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动

<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天

<input type="checkbox" name="interest" value="play"/>玩游戏

列表框-语法

<select(列表框) name="列表名称" size="行数">

<option value="选项的值" selected="selected"(默认选中项)>…</option >

<option(选项) value="选项的值">…</option >

</select>

按钮-语法

<input type="reset" (重置按钮)  value="reset按钮"(按钮上显示的文字)>

<input type="submit"(提交按钮)  value="submit按钮">

<input type="button"(普通按钮)  value="button按钮"/>

图片按钮

<input type="image" src="data:images/login.gif"/(图片路径)>

多行文本域-语法

<textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea  >

文件域-语法

<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>

  <p><input type="file"(文件域) name="files" />

  <input type="submit" name="upload" value="上传" /></p>

</form>

邮箱-语法

<p>邮箱:<input type="email"（邮箱）  name="email"/></p>

<input type="submit"/>

注意：会自动验证Email地址格式是否正确

网址-语法

<p>请输入你的网址:<input type="url"（网址）  name="userUrl"/></p>

<input type="submit"/>

注意：会自动验证URL地址格式是否正确

数字-语法

<p>请输入数字:<input type="number"(数字)  name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>

<input type="submit"/>

滑块-语法

<p>请输入数字:<input type="range"(滑块)  name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>

<input type="submit"/>

搜索框-语法

<p>请输入搜索的关键词:<input type="search"(搜索框)  name="sousuo"/></p>

<input type="submit"/>

表单的高级应用

隐藏域-语法

<input type="hidden"(隐藏域) value="666" name="userid">

只读和禁用-语法

<input name="name" type="text" value="张三"  readonly(只读文本框)>

<input type="submit "  disabled （禁用）  value="保存" >

表单元素的标注

1.增强鼠标的可用性

2.自动将焦点转移到与该标注相关的表单元素上

语法

<label for="id"(表单元素的id)>标注的文本</label>

<input type="radio" name="gender" id="male"/(表单元素id)>

表单的初级验证

表单验证的好处

1.减轻服务器的压力

2.保证数据的可行性和安全性

表单初级验证的方法

1.placeholder 2.required 3.pattern

placeholder

1.input类型的文本框提供一种提示（hint）

2.可以描述文本框期待用户输入何种内容

3.提示语默认显示，当文本框中输入内容时提示语消失

4.适合于input标签：text、search、url、email和password等类型

语法：

<input type="search" name="sousuo"  placeholder(文本框输入内容提示)="请输入要搜索的关键字"/>

required

1.规定文本框填写内容不能为空，否则不允许用户提交表单

2.适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

语法：

<input type="text" name="username"  required/(必填项)>

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

语法：

<input type="text" name="tel"  required pattern（验证规则，正则表达式）="^1[358]\d{9}" />

部分资料来源于网络，侵删

三、参考资料

1、input标签详解

input元素

用来设置表单中的内容项，比如输入内容的文本框，按钮等
不仅可以布置在表单中，也可以在表单之外的元素使用

input元素的属性

type属性：指定输入内容的类型，默认为text:单行文本框
name属性:输入内容的识别名称，传递参数时候的参数名称
value属性:默认值
maxlength:输入的最大字数
readonly属性：只读属性，设置内容不可变更，提交时会以前发送至服务器
disabled属性：设置为不可用（不可操作）
required属性：设置该内容为必须填写项，否则无法提交
placeholder属性：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email//password/search有效
autofocus属性：自动获得焦点
accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点
tabindex属性：指定按Tab键时，项目间的移动顺序
autocomplet属性： HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能

input的其他属性还有很多，我们放在案例中逐步讲解，暂时先了解这三个

type属性值

默认为text
password：密码状态输入
submit:提交按钮，点击将数据发送至服务器
reset:重置按钮
button:普通按钮
imge：图片式提交按钮
hidden；隐藏字段

该内容不会显示页面上
一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器
关于hidden暂时只了解这么多，以后用到的时候再详细说

email:表示要输入一个电子邮箱

这是HTML5新增的元素
他会对输入内容进行验证，在之前需要编写大段的JS代码来进行这项工作
浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

url:表示要输入一个网址

这是HTML5新增的
他会对输入内容进行验证，在之前需要编写大段的JS代码来进行这项工作
浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

tel:表示输入的内容是一个电话号码

这是HTML5新增的
他不会对输入内容进行验证
浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

number:

这是HTML5新增的
可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值
浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

range(活动条)

这是HTML5新增的；与number类型类似，也是表示一定范围的数值输入，但是以一个活动条的状态显示
可以配合input的max/min/step/value规定的最大值/最小值/步长/默认值
浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

时间类

这是HTML5新增的；
包括datetime/datetime-local/date/month/week/time
浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同

color

这是HTML5新增的；
可以建立一个颜色的选择输入框
浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同

seacrch

这是HTML5新增的；
用于建立一个搜索框，用来供用户输入搜素的关键词
浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同

file

用来创建一个文件选取的输入框
可通过accept属性规定选取文件的类型，比如图片/视频
multipe属性可以设定一次允许选择多个文件

checkbox/复选框

用来创建一个复选框（可以多项选择）
通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取

radio/单选框

用来创建一个单选框（可以多项选择）
通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取
必须将同一组单选项设置一个相同的name属性值

四、课程代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>登录的表单实例</title>

 </head>

 <body>

     <div>

         <form action="action.html" method="post">

             <div>

                 <label for="user_phone">手机号码：</label>

                 <input id="user_phone" name="user_phone" type="text" pattern="^1[358]\d{9}" placeholder="大陆手机号码">

             </div>

             <br>

             <div>

                 密码：<input name="password" type="password" placeholder="密码只能填写6位">

             </div>

             <br>

             <div>

                 <input name="remember_me" checked type="checkbox">记住我

             </div>

             <br>

             <div>

                 <input name="gender" checked type="radio" value="nan"> 男

                 <input name="gender" type="radio" value="nv"> 女

             </div>

             <br>

             <div>

                 <div>爱好</div>

                 <input name="hobby[]" type="checkbox" value="hobby1">篮球

                 <input name="hobby[]" type="checkbox" value="hobby2">足球

                 <input checked name="hobby[]" type="checkbox" value="hobby3">旅游

                 <input checked name="hobby[]" type="checkbox" value="hobby4">挖掘机

             </div>

             <br>

             <div>

                 <div>班级</div>

                 <select name="class" id="">

                     <option value="class1">班级一</option>

                     <option value="class2">班级二</option>

                     <option selected="selected" value="class3">班级三</option>

                 </select>

             </div>

             <br>

             <div>

                 <div>个人简介</div>

                 <textarea name="profile" id="" cols="60" rows="5">textarea设置默认值</textarea>

             </div>

             <br>

             <div>

                 <div>个人图片</div>

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

             </div>

             <br>

             <div>

                 <div>邮箱</div>

                 <input name="email" type="email">

             </div>

             <div>

                 <div>网址</div>

                 <input name="url" type="url">

             </div>

             <div>

                 <div>年龄</div>

                 <input name="age" type="number" min="0" max="150" step="12">

             </div>

             <div>

                 <div>滑块</div>

                 <input name="range1" type="range" min="2" max="150" step="30">

             </div>

             <div>

                 <div>搜索</div>

                 <input name="search11" type="search">

             </div>

             <br>

             <div>

                 <div>隐藏域</div>

                 <input type="hidden" value="666" name="userid">

             </div>

             <div>

                 <input type="submit" value="登录">

                 <input type="reset" value="重置">

                 <input type="button" value="普通按钮">

                 <input type="image" src="../img/btn.jpg" style="width: 100px;">

             </div>

         </form>

     </div>

 </body>

 </html>