前端学习日记4

失眠收容站

已于 2023-01-15 17:02:19 修改

阅读量318

点赞数

分类专栏：前端文章标签： html5 前端学习

于 2023-01-15 17:01:40 首次发布

本文链接：https://blog.csdn.net/qq_53321156/article/details/128645002

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML表单

文章目录

三、HTML5表单允许表单元素写在表单标签之外，通过form的id属性和表单元素的form属性进行连接

四、HTML4支持的input类型

总结

前言

本章学习HTML表单的处理

一、表单处理过程

1.设计表单，并放一写输入域（input），或称为表单元素

2.网站访问者在客户端上填写上述输入域，并提交到服务器端

3.服务器处理数据并返回确认信息

二、表单基本语法

<form action="" method="get">
         <input type="text" name="user"/>
         <select name="habit">
                   <option value="football">足球</option>
         </select>
         <input type="submit" value="提交"/>
</form>

action属性：指定表单数据提交到哪个服务端应用程序，url地址

method属性：指定数据提交的方法，默认为get方法

get方法：在http请求的URL地址后嵌入表单数据，以"?"开始，每一项数据按照"name=value"格式，使用"&"相连。数据开放

post方法：将数据放入表单数据体中传递到服务器。安全性高

<form name="表单名" method="提交方法" action="处理程序">

post和get提交方法的主要区别

传送方式：get通过地址栏传输，post通过报文传输。

传送长度：get参数有长度限制（受限于url长度），而post无限制

安全性：post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）

传输数据类型：post能发送更多的数据类型（get只能发送ASCII字符）

post比get慢

建议：在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式当提交的数据包含隐私或机密信息时，建议用Post数据提交方式

三、HTML5表单允许表单元素写在表单标签之外，通过form的id属性和表单元素的form属性进行连接

<form action="" method="get" id="form1">
        <input type="text" name="user"/>
        <select name="habit">
                 <option value="football">足球</option>
        </select>
</form>
<input type="submit" form="form1" value="提交"/>

注意：表单元素一定要设置name属性

四、HTML4支持的input类型

文本域（text）、密码域（password）、图像域（image）、隐藏域（hidden）、文件域（file）、单选按钮（radio）、复选框（checkbox）、提交按钮（submit）、重置按钮（reset）、普通按钮（button）、多行文本（textarea）、下拉列表（selection与option）

<input type="text" value="" size="" maxlength="">

<input type="radio" name="sex" id="sex_man" value="man">
<input type="radio" name="sex" id="sex_woman" value="woman">
<textarea name="textfield" cols="10" rows="4" id="textfield>"></textarea>
<select name="habit" size="2">
         <option value="http://www.baidu.com">百度</option>
         <option value="http://www.sina.com">新浪</option>
</select>

<input>标记及其属性

基本语法：

<input type="域类型" name="输入域名称" value="输入域的值">

1.<input>标记主要有六个属性：

type，name，size，value，maxlength，check。

其中，name和type是必选的两个属性：

name：属性的值是响应程序（由form标记中的action属性指定）中表单的变量名

名称	格式	说明
文本域	<input type="text" name="文本字段名称" maxlength=" " size=" " value=" ">	size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数
密码域	<input type="password" name="密码字段名称" size=" " maxlength=" " value=" " >	当用户输入密码时，区域内将会显示“*”号代替用户输入的内容
单选按钮	<input type="radio" name=" " value=" " checked />	checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时，设置相同的name值
复选框	<input type="checkbox" name=" " value=" " checked />	checked属性用来设置该复选框默认状态是否被选中，当有多个复选框时，可设置相同的name值，也可以设置不同的name值
提交按钮	<input type="submit" name=" " value=" "/>	将表单内容提交给服务器的按钮
取消按钮	<input type="reset" name=" " value=" "/>	将表单内容全部清除，重新填写的按钮
图像按钮 image	<input type="image" src="图片" alt=""/>	使用图像代替submit按钮，图像的源文件名由src属性指定
文件域	<input type="file" name=" " size=" " maxlength=" ">	上传文件
隐藏域	<input type="hidden" name=" " value=" " />	用户不能在其中输入信息，用来预设某些要传递的信息

2.按钮

提交按钮：

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

重置按钮：

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

普通按钮1：

<input type="button" name="" value="注册"/>

普通按钮2：

<button>注册</button>

若不显式地注册监听事件，单击普通按钮1时不会提交或重置表单；

但是，即使不显式地注册监听事件，单击普通按钮2时默认提交表单数据

<label> 标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

将 label 绑定到另外一个元素的实现方式：

（1）使用<label>标签包裹input输入域

<label>
<input type="radio" name="stuSex" value="0" id="stuSex_1">女
</label>

（2）使用<label>标签的"for" 属性设置为另外一元素的id。

<input type="radio" name="stuSex" value="1" id="stuSex_0">
<label for="stuSex_0">男</label>

3.下拉列表框：<select>，<option>

在表单中，通过<select>和<option>标记可设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。

基本语法：

<select name="" size="" multiple>
   <option value="" selected>...</option>
   <option value="">...</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel" selected="selected">Opel</option>
  <option value="audi">Audi></option>
</select>

4.多行文字标记<textarea>标记

基本语法：

<textarea name="" rows="" cols="" wrap="on|off|virtual|physical">
初始值
</textarea>

其中：

rows设置输入域的行数，

cols设置输入域的列数，

wrap设置是否自动换行：默认值on，表示换行；off时不换行。

例一：设计所示的学生信息注册网页。

我的代码：

<center>
    <p><b>学生信息注册</b></p>
</center>
<form action="" method="post" id="studentinformation" align="center">
<p>姓名：<input type="text" name="姓名" maxlength="20" value=""></p>
<p>性别：男<input type="radio" name="男" value="man" checked />
    女<input type="radio" name="女" value="woman" />
</p>
<p>出生日期：<input type="text" maxlength="20" />按格式yyyy-mm-dd</p>
<p>学校：<input type="text" maxlength="20" /></p>
<p>专业：<select name="major">
        <option value="计算机科学与技术" selected>计算机科学与技术</option>
        <option value="软件工程">软件工程</option>
        <option value="通信工程">通信工程</option>
    </select></p>
    <p>体育特长：<input type="checkbox" name="PE" value="basketball"/>篮球
        <input type="checkbox" name="PE" value="volleyball"/>排球
        <input type="checkbox" name="PE" value="soccerball"/>足球
        <input type="checkbox" name="PE" value="swim"/>游泳
    </p>
    <p>上传照片：<input type="file" name="photo" value="选择文件"></p>
    <p>密码：<input type="password"/></p>
    <p>个人介绍：<textarea name="introduction" rows="5" cols="30"></textarea>></p>
    <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置">
</form>

运行结果：

问题：不知道表单如何对齐

比较参考代码：

我缺少 <table border="0" align="center" cellpadding="2" cellspacing="2">相关代码

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字网页</title>
</head>

<body>

    <h3 align="center">学生信息注册</h3>
    <form name="stu" action="" method="post">
        <table border="0" align="center" cellpadding="2" cellspacing="2">
            <tr>
                <td>姓名：</td>
                <td><input type="text" name="stuName"></td>
                <td></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="stuSex" value="0" checked="checked">男
                    <input type="radio" name="stuSex" value="1">女
                </td>
                <td></td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td><input type="text" name="stuBirthday"></td>
                <td>按格式yyyy-mm-dd</td>
            </tr>
            <tr>
                <td>学校：</td>
                <td><input type="text" name="stuSchool"></td>
                <td></td>
            </tr>
            <tr>
                <td>专业：</td>
                <td><select name="stuSelect2">
                        <option value="0" selected>计算机科学与技术</option>
                        <option value="1">网络工程</option>
                        <option value="2">物联网工程</option>
                        <option value="2">物联网工程</option>
                        <option value="3">应用数学</option>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>体育特长：</td>
                <td colspan="2">
                    <input type="checkbox" name="stuCheck" value="0">篮球
                    <input type="checkbox" name="stuCheck" value="1">排球
                    <input type="checkbox" name="stuCheck" value="2">足球
                    <input type="checkbox" name="stuCheck" value="3">游泳
                </td>
            </tr>
            <tr>
                <td>上传照片：</td>
                <td colspan="2"><input type="file"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="stuPwd"></td>
                <td></td>
            </tr>
            <tr>
                <td>个人介绍：</td>
                <td colspan="2"><textarea name="Letter" rows="4" cols="40"></textarea></td>
            </tr>
            <tr>
                <td colspan="3" align="center"><input type="submit" value="提交">&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>

</body>

</html>

5.新增输入类型

type新属性值
type=“tel"	输入电话号码
type="email"	限制用户输入必须为Email类型
type="url"	限制用户输入必须为URL类型
type="number"	限制用户输入必须为数字类型
type="range"	产生一个滑动条的表单
type="search“	产生一个搜索意义的表单
type="color"	生成一个颜色选择表单
type="time"	限制用户输入必须为时间类型
type="date"	限制用户输入必须为日期类型
type="month"	限制用户输入必须为月类型
type="week"	限制用户输入必须为周类型

email类型

专门用于输入E-mail地址的文本输入框，在提交表单的时候，自动验证email输入框的值。如果不是有效的邮箱地址，则不允许提交表单。对于不支持email的浏览器，以type="text"纯文本的方式输入。

语法：

<input type="email" name="user_email" value="xxxx@163.com">

tel类型

提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多号码还包括“+、-、（、）”等，如：+86-10086。在手机浏览器上打开时会弹出带有数字的键盘，提高用户体验。没有默认的数据校验规则，但可以通过pattern正则表达式提供数据约束。

语法：

<input type="tel" name="tel1" pattern"\d{11}">

url类型

提供用于输入url地址这类特殊文本的文本框。表单提交时进行校验。

语法：

<input type="url" name="user_url" value="http://...">

range类型

提供用于输入某一特定范围内数值的文本框，在网页中显示为滑动条。

语法：

<input type="range" name="range1" min="1" max="30" step="10"/>

min, max, step 的默认值分别为0、100、1

number类型

提供用于输入数值的文本框。可以规定允许输入的最大、最小值、默认值和数字间隔等。表单提交时进行校验。

语法：

<input type="number" name="user_num" min="1" max="20" step="4">

search类型

提供用于输入搜索关键词的文本框。形式上与text类型基本一样。只是当输入关键词后，搜索框右侧会出现“╳”，单击其即可清除输入的搜索词。没有验证规则

语法：

<input type="search" name="search1"/>

color类型

提供专门用于设置颜色的文本框。通过单击文本框，可以快速打开拾色器面板，方便用户可视化选择一种颜色。

语法：

<input type="color" name="color1"/>

日期选择器

日期选择器（Data Pickers）是网页中经常要用到的一种控件，在HTML5之前的版本中，多是采用JavaScript框架来实现，使用麻烦。

输入类型	HTML 代码	功能和说明
date	<input type=“date”>	选取日、月、年
month	<input type=“month”>	选取月、年
week	<input type=“week”>	选取周和年
time	<input type="time"	选取时间（小时和分）
datetime	<input type=“datetime”>	选取时间、日、月、年（UTC时间）
datetime-local	<input type=“datetime-local”>	选取时间、日、月、年（本地时间）

日期:<input type="date">
月份：<input type="month">
周数：<input type="week">
时间：<inpur type="time">
日期（详细）：<input type="datetime-local">

6.input属性

属性	值	描述
name	field_name	为 input 元素定义唯一的名称。
size	number	定义 input 元素的大小。
maxlength	number	定义文本域中所允许的字符最大数目。
required	true false	定义输入字段的值是否是必需的。当使用下列类型时无法使用：hidden, image, button, submit, reset
readonly	readonly	指示是否可修改该字段的值。
disabled	true false	当 input 元素首次加载时禁用此元素，这样用户就无法在其中写文本，或选定它。注释：不能与 type="hidden" 一同使用。
form	表单id	定义输入字段属于一个或多个表单。
autofocus	true false	当页面加载时，使输入字段获得焦点。注释：type="hidden" 时，无法使用。

7.HTML新增属性

autocomplete 帮助用户在input类型输入框中实现自动完成内容输入。支持的类型包括：email、url、search、tel、range、color、text、password。三种属性值：on、off和空值。（多数浏览器默认为on）

<input type="email" name="user_em" autocomplete="on" >

autofocus 用于自动获取光标焦点，为布尔值。

<input type="email" name="user_em" autofocus="on" >

placeholder 用于为输入框提供提示，提示用户输入内容，当输入框获得焦点后自动消失。支持的类型包括：email、url、search、tel、text、password。

<input type="text" name="zip_code" placeholder="请输入6位数字">

required规定输入框不能为空。支持的类型包括：email、url、search、tel、text、password、date picker、number、checkbox和file等。

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

list属性。用于制定输入框所绑定的datalist元素，可以实现数据列表的下拉效果，供用户选择，外观效果与autocomplete相似，但autocomplete提供的列表为用户历史数据。

<input type="url" name="user_url" list="urllist">
    <datalist id="urllist">
        <option label="百度" value="http://www.baidu.com"/>
        <option label="谷歌" value="http://www.google.com"/>
    </datalist>

multiple属性。支持email、file等类型一次性输入多个邮箱地址或上传多个文件等。

<input type="file" name="fileselect" multiple="multiple"/>

pattern属性。用于验证输入内容是否与自定义的正则表达式匹配。支持的类型包括：text、search、url、 email、 tel、password等。

<input type="text" name="zip_code" pattern="[0-9]{6}" />
<input class="inp" type="tel" name="tel1" pattern="\d{11}"/>

height和width属性，用于规定image图像的高和宽。

<input type="image" src="img_01.jpg" height="50" width="50"/>

formaction 将表单提交到不同的服务器端应用程序，覆盖form的action属性

<form action="/testform.jsp" method="get">
	E-Mail: <input type="email" name="user_email" />
<input type="submit" value="提交到页面1" formaction="1.jsp" />     <input type="submit" value="提交到页面2" formaction="2.jsp" />     <input type="submit" value="提交到页面3" formaction="3.jsp" />
</form>

新增form元素 datalist 用于为输入框提供一个可选列表，用户可以直接选择列表中的某一预设项，从而免去输入的麻烦（当然，用户仍然可以手动输入）。注：datalist可以写在form之外且不需要绑定form的id。

<input type="url" name="user_url" list="urllist"/>
    <datalist id="urllist">
        <option value="http://www.baidu.com">百度</option>
        <option value="http://www.google.com">谷歌</option>
    </datalist>
<input type="url" name="user_url" list="urllist"/>
    <datalist id="urllist">
        <option label="百度" value="http://www.baidu.com"/>
        <option label="谷歌" value="http://www.google.com"/>
    </datalist>

autocomplete 用于整个form表单注意：即便不设置这个属性，多数浏览器也默认为on novalidate用于在提交表单时取消整个表单中输入域的默认数据校验功能，但如pattern等显式声明的正则化要求仍然有效。

<form action="/testform.jsp" method="get" novalidate>
	E-Mail: <input type="email" name="user_email" />
	<input type="submit" value="提交" />
</form>

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了HTML表单的使用，表单的标签很多，需要我们牢记。

失眠收容站

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录