范仁义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="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>