HTML知识点04-表单

一、表单组成部分

一个表单有三个基本组成部分：

1. 表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
2. 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
3. 表单按钮：包括提交按钮、复位按钮和一般按钮

二、表单语法

<form  method="post" action="result.html">
   <p>  用户名：<input type="text" name="username"  placeholder="请输入您的用户名">  </p>
   <p>  密&emsp;码：<input type="password" name="pass" placeholder="请输入您的密码">  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重置"/> 
   </p>
</form>

 效果：

三、元素详解

1. <form>标签是用来表示采集数据的范围

<form action="" method=""></form>

属性：

1. action  采集的数据提交的路径
2. method  采集的数据提交的方式（get/post 不标注默认为get）

        (1) get   保密信息不推荐使用，提交可以在上方地址栏看到相关信息。

        (2) post  在实际网页开发中通常采用post方式提交表单数据。

2. 表单的属性

语法：

<input type="text" name="username"  placeholder="请输入您的用户名" value="" maxlength="10">

属性	说明
type	指定元素的类型
name	指定表单元素的名字(输上后会有文本自动补全功能，有历史记录提示。)
value	输入的元素初始值（input内部的初始值，可以选择不写） 注：type类型为按钮时 value必须写上去 例：value=“登录”
placeholder	占位符 输入框的提醒文本
maxlength	type为text 或 password 时，输入的最大字符数

3.type类型

 两个输入框

• type="text"  文本框，输出框，例如用户名、验证码的框

用户名：<input type="text" name="username"  placeholder="请输入您的用户名"> 

•     type="password"  密码框

密码：<input type="password" name="pass" placeholder="请输入您的密码">

四个按钮

•     type="submit"     提交按钮 <input type="submit">

<input type="submit" name="Button" value="提交"/>

•     type="reset"     重置按钮

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

•     type="button"   普通按钮，可以自己设定按钮功能

<input type="button" name="Reset" value="按钮"/> 

•     type="image" 图片提交按钮   和提交类似

<input type="image" src="图片路径" alt="加载失败，请重新尝试" >

 两个选框

• type="radio" 单选框 多选一，name值要保持一致

性别：<input type="radio" name="sex" id="male"/> 男
      <input type="radio" name="sex" id="male"/> 女	

• type="checkbox" 多选框，可以选择多个值

兴趣爱好：
<label>
<!--label可以选择不写，无具体含义，意为标签-->
		<input type="checkbox" name="hobby" checked="checked"/> 编程
<!--checked="checked"表示默认选中该项-->
		<input type="checkbox" name="hobby"/> 跳舞
		<input type="checkbox" name="hobby"/> 跑步
		<input type="checkbox" name="hobby"/> 围棋
</label>

 文件输入框

• type="file" 文件输入框，可以上传文件

<input type="file" name="myfile" multiple="multiple" />
<!--multiple="multiple"表示可以同时上传多个文件，不加默认上传1个-->

按钮

• 在type中定义按钮类型，赋予按钮各种功能，不赋值则默认为普通按钮

</form>    
    <button type="button">普通按钮</button>
	<button type="submit">提交按钮</button>
	<button type="reset">重置按钮</button>
</form>

4.文本域

多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞

cols列来定义宽  rows行来定义高 定义文本框大小，初始值，可以不写，页面中可以修改，用样式修改。不想在页面中被修改加style=''resize:none;"

<textarea cols="30" rows="10" style="resize: none; " placeholder="提醒文本"></textarea>

5.下拉选择框

 <select>
    <option>选项1</option>
    <option selected>选项2</option>
    ....
  </select>

选项默认被选中，给option增加selected或selected="selected"

<select>
		<option value="boshi">博士</option>
		<option value="shuoshi">硕士</option>
		<option selected="selected" value="benke">本科</option>
<!--下拉选择框的选项默认为本科，可在页面上自行修改-->
<!-- value要么不写，要不就赋上值，否则提交不上，赋值之后提交的是value值 -->
</select>
<!--<select multiple="multiple">可以同时提交多个选项，用的比较少-->

6.隐藏域（不太重要）

        隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
 

<input type="hidden" name="..." value="...">

具体效果截图可以看下篇文章