首页 > 代码库 > 表单标签

表单标签

2024-09-04 23:07:15   220人阅读

 

作用: 提交数据到服务器端

表单的属性

form定义表单的范围<form action="#" method="get"> …….</form>

action : 指定提交的服务器的地址

method: 指定表单提交数据的方式

文本框: <input type="text" name="userName">

密码框: <input type="password" name="password">

单选项: <input type="radio" name="sex" value="http://www.mamicode.com/1" >, 需要添加name属性和value属性 ,默认选中要设置为: checked="checked"

文件框: <input type="file" >

文本域: <textarea cols="列" rows="行" name="userInfo"></textarea>

提交按钮: <input type="submit" value="http://www.mamicode.com/显示的文字"/>

图片提交: <input type="image" src="http://www.mamicode.com/图片的路径" />

重置按钮: <input type="reset" value="http://www.mamicode.com/显示的文字"/>

普通按钮: <input type="button" value="http://www.mamicode.com/显示的文字"/> (通常和js配合使用)

隐藏项: <input type="hidden" name="id" value="http://www.mamicode.com/123">

下拉输入项:

<select name="stu">

<option>--请选择--</option>

<option value="http://www.mamicode.com/1">高中</option>

<option value="http://www.mamicode.com/2">大学</option>

</select><br/>

 

表单的提交方式:

get: 提交的时候把请求参数直接拼接到url后面 , 不安全 , 对请求参数的数据大小有限制,不能超过1k

post: 提交的时候请求参数没有在url后面 , 安全 ;

 

案例:

 

<!DOCTYPE html>

<html>

<head>

<title>表单.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->

</head>

<body>

       <form action="#" method="get" >

       <table border="1" width="300" cellspacing="0" align = "center">

       <tr>

           <td align="right"><b>用户名:</b></td>

           <td align="left"><input type="text" size="30"></td>         

       </tr>

       <tr>

           <td align="right"><b>密 码:</b></td>

           <td align="left"><input type="password" size="31"></td>        

       </tr>

       <tr>

           <td align="right"><b>性 别:</b></td>

           <td align="left">

<input type="radio" name="sex" value="http://www.mamicode.com/female" checked="checked" >男

<input type="radio" name="sex" value="http://www.mamicode.com/male">女

</td>             

       </tr>

<tr>

           <td align="right"><b>爱 好:</b></td>

           <td align="left">

           <input type="checkbox" name="habbit" value="http://www.mamicode.com/Java">Java

           <input type="checkbox" name="habbit" value="http://www.mamicode.com/Android">Android

           <input type="checkbox" name="habbit" value="http://www.mamicode.com/IOS">IOS

           <input type="checkbox" name="habbit" value="http://www.mamicode.com/PHP">PHP

           </td>             

       </tr>

       <tr>

           <td align="right"><b>学 历:</b></td>

           <td 

              align="left"><select name="edu">

                  

                  <option value="" >请选择</option>

                  <option value="http://www.mamicode.com/zk" >专科</option>

                  <option value="http://www.mamicode.com/bk" >本科</option>

                  <option value="http://www.mamicode.com/ss" >硕士</option>

              </select>

           </td>                       

       </tr>

       <tr>

           <td align="right"><b>近 照:</b></td>

           <td align="left"><input type="file" name="file"></td>          

       </tr>  

       <tr>

           <td align="right"><b>备 注:</b></td>

           <td 

              align="left"><textarea rows="10" cols="20" name="desc" >这家伙很懒!神马也没留下!</textarea>

           </td>         

       </tr>  

       <tr>

           <td align="center" colspan = "2">

<input type="submit" value="http://www.mamicode.com/提交"/>

<input type="reset" value="http://www.mamicode.com/重置"/>

</td>                

       </tr>  

       </table>

       </form>

</body>

</html>

 

表单标签


联系
我们