表单标签

Posted 2020-10-13

---恢复内容开始---

表单标签<form>

　 功能

1. 　表单用于向服务器传输数据，从而实现用户与WEB服务器的交互

2. 　表单能够包含input/textarea/select/fieldset/label 标签

 

 

　　属性

 

　　　　　action(表单提交到哪里)  

• 一般指向服务器端的一个程序，程序接收到表单提交过来的数据作相应的处理 
• method(表单的提交方式)
• post/get 默认取值是get

表单元素

　　概念：

• 　　　　HTML表单是HTML元素中较为复杂的部分，表单往往和脚本/动态页面/数据处理等功能相结合，因此它是用来收集用户的输入信息
• 　　　　表单一般用来收集用户的输入信息

　　　原理：

• 　　　　在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过internet传送到服务器上。

 

<input>系列的标签

 

 

　　类型

• 　　　　text 文本输入框   password 密码输入框　radio 单选框　　　　　　
• 　　　　checkbox 多选框　submit 提交按钮　　　　 
• 　　　　button 按钮（需要配合js使用）
• 　　　　submit
• 　　　　file(提交文件)：form 表单需要加上属性enctype=‘multipart/form-data‘
• 　　　　上传文件要注意两点：
  1.   请求方式必须是post
  2.    enctype=‘multipart/form-data‘　　　　　　　　

 

 

 

　表单属性

　　　　name :表单提交项的键

• 　　是和服务器通信时使用的名称；

　　　 value :表单提交项的值。

1. 　 对于不同的输入类型，value 属性的用法也不同：
2. 　 type=‘button‘,‘reset‘,‘submit‘-定义按钮上的显示文本
3. 　 type=‘text‘,‘password‘,‘hidden‘-定义输入字段的初始值
4. 　 type=‘checkbox‘,‘radio‘,‘image‘-定义与输入相关联的值　

　　　　id   :

• 　　是浏览器端使用的名称，主要是为了方便客户端编程而在CSS和javascript中使用

<select>下拉选标签

属性

　　name : 表单的提交项的键。

　　size : 选项个数

multiple : multiple

　　　　　 <optgroup> 为每一项加上分组

　　　　　 <option> 下拉选中的每一项 属性：

　　　　 <value> :表单提交的值

　　　　 selected:selected 下拉选默认被选中

<textarea>多行文本框

　　<form id =‘form1‘ name=;form1‘ method=‘post‘ actoin=‘‘>

　　<textarea cols=‘宽度‘ rows=‘高度‘ name=‘名称‘>   默认内容

　　</textarea>

　　</from>

<label>标签

　　标签为input元素定义标注

• label 元素不会向用户呈现任何特殊效果。
• <label>标签的for属性值应当与相关元素的id属性值相同

　　<form method=‘post‘ action>

　　　　<label for=‘username‘>用户名</label>

　　　　<input type=‘text‘ name=‘username‘ id=‘username‘>

　　</form>

<fieldset>标签

　　　<fieldset>

　　　　　　<legend>登录吧</legend>

　　　　　　<input type=‘text‘>

　　　</fieldset>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---恢复内容结束---