表单标签

Posted 2020-08-31 码上加油站

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单标签相关的知识，希望对你有一定的参考价值。

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

表单的属性

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

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

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

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

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

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

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

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

提交按钮: <input type="submit" value="显示的文字"/>

图片提交: <input type="image" src="图片的路径" />

重置按钮: <input type="reset" value="显示的文字"/>

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

隐藏项: <input type="hidden" name="id" value="123">

下拉输入项:

<select name="stu">

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

<option value="1">高中</option>

<option value="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="./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="female" checked="checked" >男

<input type="radio" name="sex" value="male">女

</td>             

       </tr>

<tr>

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

           <td align="left">

           <input type="checkbox" name="habbit" value="Java">Java

           <input type="checkbox" name="habbit" value="android">Android

           <input type="checkbox" name="habbit" value="ios">IOS

           <input type="checkbox" name="habbit" value="php">PHP

           </td>             

       </tr>

       <tr>

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

           <td 

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

                  

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

                  <option value="zk" >专科</option>

                  <option value="bk" >本科</option>

                  <option value="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="提交"/>

<input type="reset" value="重置"/>

</td>                

       </tr>  

       </table>

       </form>

</body>

</html>

以上是关于表单标签的主要内容，如果未能解决你的问题，请参考以下文章