您的位置：首页 > 编程语言 > Java开发

【JavaWeb】HTML语言_表单标签

2018-01-08 23:28 155 查看

表单标签

1.标签格式：<form></form>

2.表单标签的作用：采集用户输入的信息数据

3.应用：

（1）用户注册：用户使用表单输入用户信息（用户名、密码、确认密码、邮箱）——>校验——>注册——>将信息发送至服务器的数据库保存用户信息

（2）用户登录：输入用户名和用户密码——>登录——>校验在数据库中是否存在

4.form标签当中的必填属性：

（1）action：表单最终提交的地址（url），提交至某个页面当中

（2）method：提交的方式（两种）

①get 方式：<1>使用此种方法提交后，用户的信息会显示在地址栏当中（不安全）

  <2>提交的数据大小有限制（不超过1kb）

②post 方式：<1>此种方法用户的信息不会显示在地址栏（安全）

  <2>对于用户提交的数据大小没有限制

5.表单当中常用的属性：

（1）文本输入框：
<input type="text" name="username" />

（2）密码输入框： <input type ="password" name="password"/>

（3）单选框： <input type ="radio" />
注：将选项里name属性的值都设置为相同的

（4）复选框: <inpyt type ="checkbox"/>
注：将选项里name属性的值都设置为相同的

（5）下拉菜单： <select name=""></select>
注：select 中的子标签option 为下拉选项

（6）上传文件： <input type="file" name=""/>

（7）文本输入域： <textarea></textarea>
注：rows属性指定有多少行，cols指定一行有多少个字符

（8）按钮： <input type="button" value="" />

（9）提交： <input type = "submit" value="提交"/>

（10）重置： <input type="rest" value="重置"/>

注：name属性必须填写（给后台程序进行标记，方便读取）

练习1：表单标签的简单实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>

<body>
<form action="#" method="post">
用户名 :<input type="text" name="username" value="请输入用户名"><br/>
密  码：<input type="password" name="password" value="请输入密码"><br/>
<input type="submit" value="提交">
</form>
</body>
</html>

效果：

练习2：表单标签的完善版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>

<body>
<form action="#" method="post">

用户名 :<input type="text" name="username" value="请输入用户名" size="20" /> <br/>

密码：<input type="password" name="userpassword" value="请输入密码" size="20"/> <br/>

性别:
<input type="radio" name="gender" value="男"/> 男
<input type="radio" name="gender" value="女" /> 女 <br/>

爱好:
<input type="checkbox" name="hobit" value="足球"/> 足球
<input type="checkbox" name="hobit" value="篮球"/> 篮球
<input type="checkbox" name="hobit" value="玩游戏"/> 玩游戏
<input type="checkbox" name="hobit" value="排球"/> 排球 <br/>
籍贯:

<select name="address">
<option value="东京">东京</option>
<option value="北京">北京</option>
<option value="南京">南京</option>
</select><br/>

<input type="hidden" name="id"/>

上传照片:
<input type="file" name="photo"/><br/>

自我描述:
<textarea rows="5" cols="20">请输入自我评价</textarea><br/>

<input type="submit" value="提交"/>
<input type="reset" value="重置"/>


<input type="button" value="这是一个按钮" onclick="testClick()" />
</form>
</body>
</html>

效果：

练习3：表格+表单标签的结合版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>

<body>
<div align="center">
<font color="red" size="7">用户注册</font>
</div>

<form action="#" method="post">
<table border="1px" align="center">
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" value="请输入用户名"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" value="请输入密码"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobit" value="唱歌"/>唱歌
<input type="checkbox" name="hobit" value="玩游戏"/>玩游戏
<input type="checkbox" name="hobit" value="听音乐"/>听音乐
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="edu">
<option value="请选择学历">请选择学历</option>
<option value="ss">硕士</option>
<option value="bk">本科</option>
<option value="dz">大专</option>
</select>
</td>
</tr>
<tr>
<td>上传照片</td>
<td>
<input type="file" name="desc"/>
</td>
</tr>
<tr>
<td>自我描述</td>
<td>
<textarea rows="5" cols="20" name="input">请输入自我评价</textarea>
</td>
</tr>
<tr align="center">

<td colspan="2">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航