表单域对象

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据

文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等

代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞

密码框

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：＜input type="password" name="..." size="..." maxlength="...“/＞

隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：＜input type="hidden" name="..." value="..."＞

复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

代码格式：＜input type="checkbox" name="..." value="..."＞

单选框

当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。

代码格式：＜input type="radio" name="..." value="..."＞

必须写上相同的name值才能每次选中一个

文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件

代码格式：＜input type="file" name="..." size="15" maxlength="100"＞

多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞

下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。

＜select name="..." size="..." multiple＞

＜option value="..." selected＞...＜/option＞

...

＜/select＞

表单练习

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div><h1>小明的报名表</h1><form><p>用户名:<br><input type="text" name="usename" placeholder="手机/邮箱/用户名" style="width: 245px;"/></p><p>密码:<br><input type="password" name="pwd" placeholder="密码" style="width: 245px;"/></p><p>确认密码:<br><input type="password" name="pwd" placeholder="密码" style="width: 245px;"/></p><p>爱好:<br><input type="checkbox" name="like" id="like1" value="唱歌" /><label for="like1">唱歌</label><input type="checkbox" name="like" id="like2" value="跳舞" /><label for="like2">跳舞</label><input type="checkbox" name="like" id="like3" value="游泳" /><label for="like3">游泳</label><input type="checkbox" name="like" id="like4" value="看书" /><label for="like4">看书</label><input type="checkbox" name="like" id="like5" value="玩手机" /><label for="like5">玩手机</label></p><p>性别:<br><input type="radio" name="sex" id="sex1" value="男" /><label for="sex1">男</label><input type="radio" name="sex" id="sex2" value="女" /><label for="sex2">女</label><input type="radio" name="sex" id="sex3" value="保密" /><label for="sex3">保密</label></p><p>上传照片<br><input type="file"></p>学历<br><select><option value ="博士">博士</option><option value ="本科">本科</option><option value ="专科">专科</option><option value ="研究生">研究生</option></select><p>个人签名<br><textarea rows="10" cols="40"></textarea></p><input type="submit" value="马上报名" style="width: 200px;height: 40px;"/><input type="reset" value="重置"><input type="button" value="同意"></form></div></body>
</html>

表单的补充——表单域相关推荐

HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
表格的简介、长表格、表格的样式、表单简介、表单补充——HTML
目录一.表格的简介(table标签) 二.长表格三.表格的样式四.表单简介(form标签) 五.表单补充六.综合案例--注册页面一.表格的简介(table标签) 在现实生活中,我们经常需要使 ...
前端：HTML/06/表单，表单元素（单行文本域，单行密码域，单选按钮，复选框，下拉列表，文本区域，上传文件域，各种按钮，隐藏域，lt;caption表格标题）
表单<form>(块元素) 表单的概念:表单主要用来获取用户数据(信息),如:注册表单, 查询表单,登录表单. 表单的工作原理: 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行 ...
表单标签——input表单元素、select下拉表单元素和textarea文本域
表单标签表单的目的是为了收集用户信息.在网页中,我们也要跟用户进行交互,收集用户资料,此时就需要表单. 表单的组成:在HTML中,一个完整的表单通常由表单域.表单控件(也称为表单元素)和提示信息三部 ...
HTML基本语法之表单标签：表单的组成，表单域，表单控件元素（表单元素），input表单元素， label标签，表单控件（表单元素）， select表单元素， textarea表单元素
文章目录表单标签表单的组成表单域常用属性: 表单控件元素(表单元素) input表单元素 label标签表单控件(表单元素) select表单元素 textarea表单元素表单元素几个总结 ...
JS同时上传表单图片和表单信息并把上传信息存入数据库，带php后端源码
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 利用JQ,jquery.form.js,bootstrap实现上传表单图片和表单信息并把上传的图片地址,inp ...
ajax合并表单,ajax。表单
JQuery读书笔记--JQuery-Form中的ajaxForm和ajaxSubmit的区别 JQuery中的ajaxForm和ajaxSubmit使用差不多功能也差不多.很容易误解. 按照作者的解 ...
html提交表单原理,HTML表单、HTTP Get与Post杂谈
HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论.本文将带您浅尝HTTP协议,在了解HTTP协议的同时将会展示许多被人们忽视的内容.在掌握了HT ...
线性表的链式表示——单链表
单链表定义线性表的链式存储又称单链表,它是指通过一组任意的存储单元来存储线性表中的数据元素.每个链表的结点,除存放元素自身的信息之外,还需要存放一个指向其后继结点的指针.即单链表的结构分为两部分, ...

表单的补充——表单域

表单域对象

文本框

密码框

隐藏域

复选框

单选框

必须写上相同的name值才能每次选中一个

文件上传框

多行文本框

下拉选择框

表单练习

代码如下：

表单的补充——表单域相关推荐

最新文章

热门文章