HTML中表单的知识点示例

这篇“HTML中表单的知识点示例”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“HTML中表单的知识点示例”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、成都做网站、蓝山网络推广、微信小程序定制开发、蓝山网络营销、蓝山企业策划、蓝山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供蓝山建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

html有什么特点

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

当用户熟悉了静态网页制作后就能感受到它的功能单一，会想建立具有交互性的动态网站。动态网站经常用到的一个元素就是表单。表单是HTML的一个重要组成部分，是网站管理员与用户之间沟通的桥梁。

表单标签--from

是一个双标签。标签中包含的数据有表单控件及必须的伴随数据，如控件标签、处理数据的脚本等。主要有表单名称、数据处理、数据传输方式等5个基本属性，其中表单的程序处理和数据传输方式是必不可少的。

程序处理属性--action

表单本身是没有用途的，用户填入表单的信息需要程序来进行处理，表单里的'action'就定义了表单所要提交到的目的文件，该目的文件收到信息后，通常和一个程序连接实现数据的处理。
属性值可以是一个程序，也可以是一个脚本的URL地址

<form action='表单的处理程序'>
</form>

##表单名称属性--name
用来给表单命名。建议每一表单设定一个功能相符的名称，防止信息提交到后台程序处理时出乱。

<form name='表单的名称'>
</form>

##数据传输方式--method
定义了表单数据发送的方式，数据发送到'action'属性所规定的页面，主要针对服务端进行处理。可作为URL变量(method='get')或者HTTP post(method='post')的方式来发送。

<form method='数据传输方式'>
</form>

#输入类控件
表单元素也称表单控件，按照填写方式分为输入类和下拉菜单类。用<input>标签定义。

<form>
<input name='控件名称' type='控件类型'>
</form>

文本框--text

最常见的文字输入区域，在登陆区，讨论区等。在页面中以单行文本框形式显示

<input type="text" name="控件名称" size="文本框长度" maxlength="最大字符数" value="文本框默认值">

如果希望文本框只读，可以使用'readonly'设置

<input type="text" name="控件名称" size="文本框长度" maxlength="最大字符数" value="文本框默认值" readonly>

密码框--password

隐藏输入框内容，输入的字符会用'*'代替

<input type="password" name="控件名称" size="文本框长度" maxlength="最大字符数" value="文本框默认值">

单选框--radio

当出现多个选项而且只能选择一个时，会用到单选框。向指定某个选项默认状态下处于选中状态时，用'checked'属性定义。只能有一个单选框设置。要想传送到处理程序中，需要设置value属性。

<input type="radio" value="单选框取值" name="单选框名称" checked>

复选框--checkbox

是可以选多个选项的选项框，也可默认多个选项都处于选中状态。

<input type="checkbox" value="单选框取值" name="单选框名称" checked>

文本域--textarea

主要用于输入多行文本，常见于留言、评论区。'rows'文本域行数，'cols'文本域列数.

<textarea name="文本域名称" rows="文本域的行数" cols="文本域的列数">
</textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form>
    <h2>用户注册页面</h2>
    <span>用户名：</span><input type="text" name="username"><br>
    密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd"><br>
    <span>确认密码：</span><input type="password" name="con_pwd"><br>
    <br>

    <span>你的年龄是：</span>
    <input type="radio" name="age" checked>18岁以下
    <input type="radio" name="age">19-35岁
    <input type="radio" name="age">35岁以上
    <br>
    <span>你的个人爱好：</span>
    <input type="checkbox" name="habbit">阅读
    <input type="checkbox" name="habbit">写作
    <input type="checkbox" name="habbit">运动
    <input type="checkbox" name="habbit">游戏
    <input type="checkbox" name="habbit">其他
    <br>

    <span>自我介绍</span>
    <br>
    <textarea rows="3" cols="60"></textarea>
</form>

</body>
</html>

HTML中表单的知识点示例

按钮

标准按钮--button

常见的灰色小来块，需要关联相应的脚本程序来处理表单，'value'可以设置按钮上要显示的文本，'onclick'可以实现鼠标处理的一些功能。

<input type="button" value="按钮上显示的文本" onclick="处理程序">

提交按钮和重置按钮--

是一类特殊的按钮，不需要设置参数，也可以实现，表单数据处理。一般来说，提交按钮和重置按钮同时出现。

<input type="submit" name="按钮的名字" value="按钮上显示的文本">
<input type="reset" name="reset" value="重置">

菜单列表控件

下拉菜单

可以节省页面空间。<select>是一个双标签。默认只有一个选项被选中。
<option>是单标签，用来定义下拉菜单中的选项。必须嵌套在<select>标签里面。'selected'表示初始被选中的选项。

<select name="下拉菜单名称" size="下拉菜单长度">
    <option value="选项值">选项一</option>
    <option value="选项值">选项二</option>
    <option value="选项值" selected>选项三</option>
</select>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
</head>
<body>
<form>
    <span>用户名：</span><input type="text" name="username"><br>
    密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd"><br>
    <br>
    <span>生日</span>
    <select>
        <option value="0">--请选择--</option>
        <option value="1">1-4</option>
        <option value="2">5-9</option>
        <option value="0">10-12</option>
    </select>
    <select>
        <option value="0">--请选择--</option>
        <option value="1">1-10</option>
        <option value="2">11-20</option>
        <option value="3">21-31</option>
    </select>

</form>
</select>
</body>
</html>

HTML中表单的知识点示例

以上是“HTML中表单的知识点示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前名称：HTML中表单的知识点示例
文章位置：https://www.cdcxhl.com/article40/jocseo.html

成都网站建设公司_创新互联，为您提供定制网站、电子商务、网站维护、网站设计、企业网站制作、面包屑导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容