HTML之表单的使用

来源：互联网发布：专业足球数据网站编辑：程序博客网时间：2024/06/06 07:40

HTML之表单的使用

以下代码可以使用网络html运行，或者使用HBuilder，本人使用在HBuilder环境下运行实例：

下面网址是是网络HTML运行器：
HTML/CSS/Javascript在线代码运行工具

1.表单基础知识了解

1.1 当我们要向服务器提交数据时，就要使用表单。

form:最顶层表单元素，其它元素都位于其内部
input:最常用的表单控件，通过其type属性可变换成不同的元素
select:下拉列表元素
textarea:多行文本输入框

1.2 语法:

<form action="" method="" enctype="">若干的表单元素</form>

1.3 form：
form属性:

action属性是指表单提交的路径，往往是服务器侧一个小程序
method属性是指数据提交方式

1.4 input元素：
input元素是最常用的表单元素，type属性值可设定为如下：
text
属性：单行的文本输入框
单元输入，比如登录用户名
password
属性：带掩码的单行输入框
密码输入
file
属性：文件选择器
作用：要上传文件时
hidden
属性：不显示在页面上，但还是会传给服务器
作用：不显示在页面上，但还是会传给服务器
button
属性：一般按钮
作用：常配合JS使用
reset
属性：恢复初始值
作用：需要恢复初始值
submit
属性：提交按钮
作用：按下后将数据提交给服务器

name属性是很多元素的元素，在一个页面name的值是可以重复的，比如将checkbox或raido组成一组要取同名. name属性值对于表单元素来说，后继浏览会根据其名称把数据传给服务器。
id属性值在同一个页面上只能出现一次.因为根据唯一的ID值来取得其对应的元素
value属性值是最终传给服务器的值，对于checkbox，radio一定明示其值

1.5 select元素：
select元素用在下拉列表框，其子元素为option

1.6 textarea：
多行输入框

2.实例源代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表单</title>    </head>    <body>        <h3>注册</h3>        <form action="http://www.sohu.com" method="get">            用户名:<input type="text" name="uname" value="Rose" maxlength="6"/><br>            密码：<input type="password" name="upass"/><br>            确认密码：<input type="password" name="ucfgpass"/><br>            爱好：<input disabled="disabled" checked="checked" type="checkbox" name="hobby" value="param"/>编程&nbsp;                 <input type="checkbox"  name="hobby" value="swim"/>游泳&nbsp;                 <input type="checkbox"  name="hobby" value="makefriend"/>交友<br>            性别:<input id="200" type="radio" name="gender" value="boy"/>男&nbsp;<input id="201" checked="checked" type="radio" value="gril" name="gender"/>女<br>            头像:<input type="file" /><br>            隐藏域:<input type="hidden" /><br>            出生日期:                <select name="year" id="">                    <option value="">1980</option>                    <option value="">1981</option>                    <option value="">1982</option>                    <option value="">1983</option>                </select>                年                <select name="month" id="">                    <option value="">1</option>                    <option value="">2</option>                    <option value="">3</option>                    <option value="">4</option>                    </select>                <br>                <textarea name="memo" rows="4" cols="50">                    我们都是好学生，每天都要花4个小时在编码上                </textarea>                <br>                <input  type="button" value="一般按钮"/>                <input type="reset" value="恢复初始值"/>                <input type="submit" value="提交"/><br>            </form>    </body></html>

样例效果：

这里写图片描述

阅读全文

0 0