html表单

最新推荐文章于 2024-03-04 14:18:16 发布

hyhcloud

最新推荐文章于 2024-03-04 14:18:16 发布

阅读量7.9k

点赞数 23

分类专栏： html 文章标签： html表单

本文链接：https://blog.csdn.net/Huangyuhua068/article/details/82228153

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.1 表单标签作用：

作用：将客户端的数据提交给服务器，（表单是客户与服务器交互的一种方式）。
可见性：在网页上是不可见的。

1.2 form常用的属性：

form标签是表单标签的一个根标签。

常用属性	作用
action	提交给服务器的地址
method	提交数据给服务器的方式，主要有两种方式：GET（默认）或POST

1.3 GET与POST在格式上的区别：

提交方法	特点
GET	默认是GET方式，参数跟在地址栏后面，以？隔开。多个参数之间以&符号分隔，安全性低。
POST	参数在地址栏是不可见的，安全性更高。
GET	提交的数据有大小限制，不能超过1kb。
POST	提交的数据是没有大小限制的。

注意：GET提交的数据有大小限制，原则上不能超过1kb。但是实际上，某些浏览器厂商并未遵守这个规范，有些超过了1kb，不同的厂商各有不同。

1.4 案例：表单标签的应用

1.4.1 案例需求

结合表格布局，制作如图所示的注册页面。

1.4.2 案例效果：

1.4.3 案例分析：

整个表单由8行2列组成，第1行显示文本，可以在td中使用label标签。
用户名、密码、性别、爱好、照片使用input标签，设置不同的type属性。
学历使用select，个人简介使用textarea
最后1行跨2列，注册、清空、按钮的type分别是submit、reset、button

表单的根标签是一个：form标签
form表单常用的属性：

action：指定表单提交的服务器地址。
method：指定表单的提交方式get/post，默认是get方式。

注意事项：

任何一个表单项如果没有name的属性值都不允许提交。
如果一个表单项可以输入数据，那么可以没有value属性值，如果不能输入数据，那么一定要存在value属性值，提交的时候是提交了value属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册案例</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<form action="http://www.baidu.com" method="get">
    <table width="400px" height="400px">
        <tr>
            <!--colspan:单元格跨几列-->
            <td colspan="2">
                <h4>用户注册</h4>
                <hr/>
            </td>
        </tr>


        <!--隐藏表单项，应用场景：某些数据对用户而言是没有意义的，用户不需要看到这些数据，但是服务器又需要，那么这-->
        <!--时候就可以使用隐藏表单项-->
        <input type="hidden" name="flag" value="true"/>

        <tr>
            <td>用户名：</td>
            <td>
                <!--用户名：普通文本输入框-->
                <input type="text" name="useName" value="请输入用户名..."/>
            </td>
        </tr>

        <tr>
            <td>密码：</td>
            <td>
                <!--密码：密码框-->
                <input type="password" name="password"/>
            </td>
        </tr>

        <tr>
            <td>性别：</td>
            <td>
                <!--性别：单选框，单选框input标签，type=radio 同一组的单选框只能选择其中一个
                  单选框如果需要分组，那么必须保持name的属性值一致。如果需要默认选中某一个，那么需要添加
                  checked属性-->
                男：<input type="radio" name="sex" value="man" checked/>
                女：<input type="radio" name="sex" value="woman"/>
            </td>
        </tr>

        <tr>
            <td>爱好：</td>
            <td>
                <!--兴趣爱好：复选框-->
                游泳：<input type="checkbox" name="hobbit" value="swimm"/>
                上网：<input type="checkbox" name="hobbit" value="surf"/>
                电影：<input type="checkbox" name="hobbit" value="movie"/>
                看书：<input type="checkbox" name="hobbit" value="read"/>
            </td>
        </tr>

        <tr>
            <td>学历：</td>
            <td>
                <!--学历:下拉框，下拉框使用的是select标签-->
                <select name="education">
                    <option value="bs">博士</option>
                    <option value="ss">硕士</option>
                    <option value="bk">本科</option>
                    <option value="dz">大专</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>照片：</td>
            <td>
                <!--照片：文件表单项-->
                <input type="file" name="image"/>
            </td>
        </tr>

        <tr>
            <td>个人简介：</td>
            <td>
                <!--个人简介：文本域 标签：textarea-->
                <textarea  cols="40" rows="10" name="intr"></textarea>
            </td>
        </tr>

        <tr align="center">
            <!--colspan：单元格跨几列-->
            <td colspan="2">
                <!--普通按钮-->
                <input type="button" value="普通按钮"/>
                <!--重置表单项-->
                <input type="reset" value="重置"/>
                <!--提交按钮：提交表单的数据到服务器上-->
                <input type="submit" value="注册"/>
            </td>
        </tr>

    </table>
</form>
</body>
</html>

1.5 常用的表单控件：

表单项	控件代码	属性	备注
文本框	<input type="text" name="名字">	type：控件的类型 name：名字，给服务器使用 value：默认值 readonly:文本框只读 disabled:文本框不可用，数据不能提交给服务器 placeholder:文本框输入前提示文字	如果没有指定type类型，默认是text
密码框	<input type="password">	属性同上	输入的字符不可见
单选框	<input type="radio" name="gender" value="男" checked="checked">	checked:默认选中 value：指定选中这一项的值，如果没有指定，默认是on	同一组的单选框只能选择其中一个，单选框如果需要分组，那么必须保持name的属性值一致。如果需要默认选中某一个，那么需要添加checked属性
复选框	<input type="checkbox" name="hobby" value="游泳">	checked：选中 value：选中这一项的值
下拉列表	<select> 容器默认是单选多选	name:给服务器使用的名字 multiple:多选 size:指定多选的时候大小
下拉列表	<option>代表其中一项	value：选中这一项的值 selected:默认选中
隐藏表单	<input type="hidden" name="id" value="值">	name：给服务器使用的名字 value：隐藏域的值	表单上不可见，可以将数据提交给服务器，一般用于一些不需要用户看到的数据。
文本域	<input type="file" name="photo" accept="image/*">	accept:指定文件类型如：image/*
多行文本域	<textarea name="intro" cols="50" rows="5"></textarea>	rows:指定显示的行数 cols:指定显示的列数	注：没有value值，主体部分就是它的值。
提交按钮	<input type="submit" value="注册"/> <button>按钮文字</button>	value:按钮上出现的文字 button：标签是一个专门按钮也可以指定type类型，默认是提交按钮	将整个表单提交给服务器
重置按钮	<input type="reset" value="重置"/>		还原到开始状态
普通按钮	<input type="button" value="按钮"/>		在表单中没有具体的功能，主要用于后期程序开发
图片按钮	<input type="image" src="img/regbtn.jpg">	x，y:点击在图片上的坐标	具有与submit相同的功能

1.6 html5新添加type属性：

值	描述
color	定义拾色器
date	定义日期字段（带有calendar控件）
datetime-local	定义日期字段（带有calendar和time控件）
month	定义日期字段的月（带有calendar控件）
week	定义日期字段的周（带有calendar控件）
time	定义日期字段的时分秒（带有time控件）
email	定义用于e-mail地址的文本字段，如果输入不正确的邮箱地址有验证的功能
number	定义带有spinner控件的数字字段
range	定义带有slider控件的数字字段
search	定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小X，点击这个小X，可以清除输入的内容。
tel	定义用于电话的文本字段，在手机上操作会出现输入数字的键盘。
URL	定义用于URL的文本字段，在手机上操作会出现输入网址的键盘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<form action="http://www.baidu.com">
    你喜欢的颜色：<input type="color" name="color"/><br/>
    生日:<input type="date" name="birthday"/><br/>
    邮箱：<input type="email" name="email"/><br/>
    手机：<input type="tel" name="tel"/><br/>
    <input type="submit" value="注册"/>
</form>
</body>
</html>

更多资料，搜索或扫码关注公众号：数说Cloud

hyhcloud

关注

23
点赞
踩
144

收藏

觉得还不错? 一键收藏
打赏
4
评论
html表单

1.1 表单标签作用：作用：将客户端的数据提交给服务器，（表单是客户与服务器交互的一种方式）。可见性：在网页上是不可见的。1.2 form常用的属性：form标签是表单标签的一个根标签。常用属性作用 action 提交给服务器的地址 method 提交数据给服务器的方式，主要有两种方式：GET（默认）或POST 1.3 GET与POS...
复制链接

扫一扫