【JavaWeb】HTML语言_表单标签

最新推荐文章于 2022-07-13 21:48:08 发布

Enjoy96

最新推荐文章于 2022-07-13 21:48:08 发布

阅读量425

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/79008347

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

表单标签

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">
  	<!--文本输入框
  		name属性必填项:给后台程序进行标记,为了方便后台程序获取用输入的用户名的信息
        size：可以指定输入的长度
  	-->
	用户名 :<input type="text" name="username" value="请输入用户名" size="20" /> <br/>
	<!--密码输入框:
		它是以明文的形式显示,name 属性必填:给后台程序标记
	-->
	密  码：<input type="password"  name="userpassword" value="请输入密码" size="20"/> <br/>
	<!--
		单选框:选择性别 男 或 女
    
    	必填name属性的值,将他们看成同一组信息,指定name属性的值是一致
	-->
	性别:
	<input type="radio" name="gender"  value="男"/> 男
	<input type="radio" name="gender"  value="女" /> 女 <br/>
	<!--
		复选框:
    		必填name属性的值,将他们看成同一组信息,指定name属性的值
	-->
	爱好:
	<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/>
	籍贯:
	<!--
		下拉菜单
    		必填项:name属性
        	select的子标签:option 选项
	-->
	<select name="address">
    	<option value="东京">东京</option>
     	<option value="北京">北京</option>
     	<option value="南京">南京</option>
	</select><br/>
	<!--
		隐藏域:<input type="hidden" name="id"/>
    		作用:它不显示效果,但是它可以携带数据
	-->
	<input type="hidden" name="id"/>
	<!--上传文件-->
	上传照片:
	<input type="file" name="photo"/><br/>
	<!--
		文本输入域:textarea
    	rows:指定有多少行
    	cols:一行指定多个字符
	-->
	自我描述:
	<textarea rows="5" cols="20">请输入自我评价</textarea><br/>

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

	<!--按钮:必须指定value属性
		特点:按钮可以触发一个单击点击事件或者是双击点击事件!
	-->
	<input type="button" value="这是一个按钮" οnclick="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>

效果：