HTML Form表单详解

最新推荐文章于 2024-08-13 17:07:13 发布

郎涯技术

最新推荐文章于 2024-08-13 17:07:13 发布

阅读量6.6k

点赞数 5

分类专栏： Web全栈文章标签： html 表单

本文链接：https://blog.csdn.net/aoshilang2249/article/details/46784327

版权

Web全栈专栏收录该内容

55 篇文章 2 订阅

订阅专栏

表单属性
属性值描述
accept MIME_type 规定通过文件上传来提交的文件的类型
accept-charset charset 服务器处理表单数据所接受的字符集
enctype MIME_type 规定表单数据在发送到服务器之前应该如何编码
method get/post 规定表单数据发送的方式，get方法和post方法
name name 规定表单的名称

target _blank/_parent/_self/_top 规定在何处打开action URL

1、action指定该表单发送时接受操作的地址
2、method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送。post则是在HTTP请求中发送。
3、enctype指定表单数据在发送的服务器之前如何编码，特别注意的是，当含有上传域时要设置编码方式为enctype="multipart/form-data"，否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，form里面的input的值以2进制的方式传过去。才能完整的传递文件数据。FTP上传大文件的时候，也有个选项是以二进制方式上传。

enctype的三个选项

值描述
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。以二进制的方式发送数据，当表单含有上传域时，必须使用后台才能获取上传的文件。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

属性	值	描述	DTD
accept	mime_type	规定通过文件上传来提交的文件的类型。	STF
align	left right top middle bottom	不赞成使用。规定图像输入的对齐方式。	TF
alt	text	定义图像输入的替代文本。	STF
checked	checked	规定此 input 元素首次加载时应当被选中。	STF
disabled	disabled	当 input 元素加载时禁用此元素。	STF
maxlength	number	规定输入字段中的字符的最大长度。	STF
name	field_name	定义 input 元素的名称。	STF
readonly	readonly	规定输入字段为只读。	STF
size	number_of_char	定义输入字段的宽度。	STF
src	URL	定义以提交按钮形式显示的图像的 URL。	STF
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。	STF
value	value	规定 input 元素的值。	STF

HTML表单(Form)常用控件

表单控件(Form Contros)	说明
input type="text"	单行文本输入框
input type="submit"	将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox"	复选框
input type="radio"	单选框
select	下拉框
textArea	多行文本输入框
input type="password"	密码输入框(输入的文字用*表示)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试8</title>
</head>

<body>
<form action="8.1.php" method="post"  enctype="multipart/form-data" target="_blank">
<table width="400" border="1" cellpadding="1" cellspacing="1" bgcolor="#999999" bordercolor="#FFFFFF">
 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">姓名</td>
  <!--文本框-->
  <td height="25" align="left"><input type="text" name="txtBox" value="textVal"></td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">密码</td>
  <!--密码框-->
  <td height="25" align="left"><input type="password" name="pswBox" value="psw"></td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">文本域</td>
  <!--文本域-->
  <td height="25" align="left">
   <fieldset>
     <legend>简介</legend>    
     <textarea name="txtAreaA" cols="25" rows="5" wrap="off">我是一个兵，来自老百姓</textarea>   
   </fieldset>
  </td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">性别</td>
  <td height="25" align="left">
   <!--单选按钮-->
   <label><input type="radio" name="radioSex" value="male">男人</input></label>
   <input type="radio" name="radioSex" value="female">女人</input>
  </td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">爱好</td>
  <td headers="25" align="left">
   <!--复选框-->
   <input type="checkbox" name="chkSport[]">篮球</input>
   <input type="checkbox" name="chkSport[]">足球</input>
  </td>
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">照片</td>
  <!--上传-->
  <td height="25" align="left"><input type="file" name="fileUpload" align="right" size="25"></td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">学历</td>
  <td height="25" align="left">
   <!--下拉列表-->
   <select name="selList" id="selList">
    <option value="0" selected="selected">专科</option>
    <option value="1">本科</option>
    <option value="2">研究生</option>
   </select>
  </td>     
 </tr>
 <tr align="center"  bgcolor="#FFCC33">
  <td height="25" colspan="3">
   <!--重置按钮-->
   <input type="reset" name="resetBtn" value="重置">
   <!--提交按钮-->
   <input type="submit" name="submitBtn" value="提交">
  </td>     
 </tr>
</table>

<!--隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在-->
<input type="hidden" name="hiddenVal" value="不会显示的值"><br/>
<!--按钮-->
<input type="button" name="btn" value="确认"></input>

</form>


<?php
    echo nl2br($_POST[txtAreaA]);   
?>

</body>
</html>