51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

form表单的使用

1.form表单

1.1form标签简介

在HTML中,form表单是用于收集用户的信息,然后将数据提交给服务器来处理。表单标签有5种:form、input、textarea、select和option。表单与表格有些类似,表格的行(tr)、单元格(th、td)等都必须放在table标签内部。创建一个表单,跟创建一个表格一样,我们也必须要把所有表单标签放在form标签内部,但表单跟表格是不一样的概念,我们常说的表单,指的是文本框、按钮、单选框、复选框、下拉列表等的统称

语法:

<form>
    //各种表单标签
</form>
form表单属性:
name  ==  表单名称
method ==  提交方式
action ==  提交地址
name属性:

在一个页面中,有可能不止一个form表单。为了区分这些表单,我们可以使用name属性来给表单进行命名

语法:

<form name="form1">

</form>

<form name="form2">

</form>
method属性:

method属性用于指定表单数据的提交方法。method属性取值有两个:一个是"get",另外一个是"post"。get的安全性较差,而post的安全性较好。所以在实际开发中,使用post比较多

语法:

<form action="a.html"></form>
2.表单元素

元素分类:input、textarea、select和option

2.1表单元素-input标签

在HTML中,大多数表单都是使用input标签来实现的,input是自闭合标签,它是没有结束符号的。

语法:

<input type="表单类型" />

** 属性:**

type:指定元素类型
name:指定单元素的名称
value:元素的初始值,type为radio时必须指定一个值
size:指定表单元素的初始宽度
maxlength:type为password时,输入的最大字符数
checked:type为radio或checkbox时,指定按钮是否被选中

type属性值:

text ==  单行文本框
pass ==  密码文本框
button	==  按钮
reset	== 重置按钮
image	== 图像形式的提交按钮
radio	== 复选框
checkbox  == 复选框
hidden == 隐藏字段
file  ==  文件上传

2.2单行文本框text语法:

<input type="text" />

案例:

<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
 		<title>单行</title>
</head>
<body>
        <form>
		账号:<input type="text"  />
    </form>
</body>
  </html>

2.3密码框password 密码框使用input标签来实现的,其中type属性取值为"password"

语法:

<input type="password" />

案例:

<!DOCTYPE html>
 <html>
 	<head>
		<meta charset="UTF-8">
 		<title>单行</title>
	</head>
 	<body>
     	<form>
         账号:<input type="text"  /><br/>
          密码:<input type="password"  />
       </form>
	</body>
</html>

2.4按钮radio单选框使用input标签来实现的,其中type属性取值为"radio"

语法:

<input type="radio" name="组名" value="值" />

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单选</title>
	</head>
	<body>
      <form>
           账号:<input type="text"  /><br/>
          密码:<input type="password"  /><br/>
           性别:<input type="radio" name="sex1" value="男"/>男
                <input type="radio" name="sex1" value="女"/>女
       </form>
	</body>
</html>

如果想要在默认情况下,让第一个单选框选中,我们可以使用checked属性来实现。

语法: 第一种方式checked="checked"

<input type="radio" name="组名" value="值"  checked="checked"/>

第二种方式checked

<input type="radio" name="组名" value="值"  checked/>

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单选</title>
	</head>
	<body>
       <form>
           账号:<input type="text"  /><br/>
           密码:<input type="password"  /><br/>
           性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
                <input type="radio" name="sex1" value="女"/>女
       </form>

	</body>
</html>

2.5复选框checkbox 复选框使用input标签来实现的,其中type属性取值为"checkbox"。单选框只能选择一项,而复选框可以选择多项

语法:

<input type="checkbox" name="组名" value="值" />

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选</title>
	</head>
	<body>
		账号:<input type="text"  /><br/>
		密码:<input type="password"  /><br/>
		性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
			<input type="radio" name="sex1" value="女"/>女<br/>
		爱好:<input type="radio" name="hobby" value="java"/>java
			<input type="radio" name="hobby" value="html"/>html
			<input type="radio" name="hobby" value="html"/>sql
	</body>
</html>

checked属性:如果想要在默认情况下,让第一个和第三个复选框选中,我们可以使用checked属性来实现案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选</title>
	</head>
	<body>
      <form>
          账号:<input type="text"  /><br/>
           密码:<input type="password"  /><br/>
          性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
	       <input type="radio" name="sex1" value="女"/>女<br/>
          爱好:<input type="checkbox" name="hobby" value="java" checked />java
               <input type="checkbox" name="hobby" value="html"/>html
               <input type="checkbox" name="hobby" value="html" checked />sql	
      </form>
	</body>
</html>

2.6按钮buttonbutton是一个普通按钮,后期我们需要配合JavaScript来进行各种操作的

语法:

<input type="button" value="值" />value的值就是按钮上的文字

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按钮</title>
	</head>
	<body>
       <form>
          账号:<input type="text"  /><br/>
           密码:<input type="password"  /><br/>
           性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
               <input type="radio" name="sex1" value="女"/>女<br/>
          爱好:<input type="checkbox" name="hobby" value="java" checked />java
               <input type="checkbox" name="hobby" value="html"/>html
              <input type="checkbox" name="hobby" value="html" checked />sql
              <br/>
               <input type="button" />
              <input type="button" value="我是按钮"/>
       </form>
	</body>
</html>

2.7重置reset重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮

语法:

<input type="reset" value="值" />

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>重置按钮</title>
	</head>
	<body>
		<form>
			账号:<input type="text"  /><br/>
			密码:<input type="password"  /><br/>
			性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
				<input type="radio" name="sex1" value="女"/>女<br/>
			爱好:<input type="checkbox" name="hobby" value="java" checked />java
				<input type="checkbox" name="hobby" value="html"/>html
				<input type="checkbox" name="hobby" value="html" checked />sql
				<br/>
				<input type="button" />
				<input type="button" value="我是按钮"/>
				<input type="reset"  />
		</form>
	</body>
</html>

2.8提交按钮submit提交按钮一般都是用来给服务器提交数据的

语法:

<input type="submit" value="值" />

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提交按钮</title>
	</head>
	<body>
		<form>
			账号:<input type="text"  /><br/>
			密码:<input type="password"  /><br/>
			性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
				<input type="radio" name="sex1" value="女"/>女<br/>
			爱好:<input type="checkbox" name="hobby" value="java" checked />java
				<input type="checkbox" name="hobby" value="html"/>html
				<input type="checkbox" name="hobby" value="html" checked />sql
				<br/>
				<input type="button" />
				<input type="button" value="我是按钮"/>
				<input type="reset"  />
				<input type="submit" value="注册" />
		</form>
	</body>
</html>

2.9隐藏域hidden在浏览器中看不到隐藏域,但是在提交表单时可以看到隐藏域的内容被提交至服务器

语法:

<input type=hidden" />

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文件上传</title>
	</head>
	<body>
		<form>
			<input type="file" />
		</form>
	</body>
</html>

2.11邮箱email会自动验证Email地址格式是否正确

语法:

<input type="email" />

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>邮箱框</title>
	</head>
	<body>
		<form>
				<input type="email" />
				<br/>
				<input type="submit" value="注册" />			
		</form>
	</body>
</html>

2.12表单元素-textarea标签单行文本框只能输入一行文本,而多行文本框却可以输入多行文本。在HTML中,多行文本框使用的是textarea标签。

语法:

<textarea rows="行数" cols="列数" >默认内容</textarea>

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多行文本域</title>
	</head>
	<body>
		<form>
				评价:<br/>
				<textarea rows="20" cols="50">您的评价使我们进步</textarea>
		</form>
	</body>
</html>

2.13下拉列表下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像。

语法:

<select>
   <option>选项内容</option>
   ......
    <option>选项内容</option>
</select>

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表</title>
	</head>
	<body>
		<form >
	        <select>
	            <option>JAVA</option>
	            <option>HTML</option>
	            <option>CSS</option>
	            <option>SQL</option>
	        </select>
  		</form>
	</body>
</html>

** select属性**

multiple  ==  设置下拉列表可以选择多项
size   ==  设置下拉列表显示几个列表项,取值为整数

案例:multiple

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表</title>
	</head>
	<body>
		<form method="post">
	        <select multiple="">
	            <option>JAVA</option>
	            <option>HTML</option>
	            <option>CSS</option>
	            <option>SQL</option>
	        </select>
   		</form>
	</body>
</html>

案例:size

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表</title>
	</head>
	<body>
		<form method="post">
	        <select size="3">
	            <option>JAVA</option>
	            <option>HTML</option>
	            <option>CSS</option>
	            <option>SQL</option>
	        </select>
   		</form>
	</body>
</html>

option属性:

selected  == 是否选中
value  ==  选项值

selected属性:

下拉列表默认是选中第一项,如果想要在默认情况下选定其中项,我们可以使用selected属性来实现。

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表</title>
	</head>
	<body>
		<form method="post">
	        <select >
	            <option>JAVA</option>
	            <option>HTML</option>
	            <option selected>CSS</option>
	            <option>SQL</option>
	        </select>
   		</form>
	</body>
</html>

3.表单元素的只读与禁用只读和禁用这两种属性在HTML表单中的作用范围不同,disabled属性可以用于所有表单元素,而readonly属性只针对input(输入框)、text area有效,对元素的影响程度不同,disability属性只是阻止元素的一切操作,例如获取焦点,点击等等;readonly属性只是将元素设置为只读,其他操作正常,还有在做提交操作时,disabled属性可以让表单元素的值无法被提交;readonly属性则不影响正常提交操作。

3.1readonly只读语法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>只读</title>
	</head>
	<body>
		<form >
	   		可输入<input type="text"   />
	       	只读不可输入<input type="text" readonly="readonly"  />
	       	<br/>
	       	可输入	<textarea rows="5" cols="10" ></textarea>
	       	只读不可输入<textarea rows="5" cols="10" readonly="readonly"></textarea>
 		</form>
	</body>
</html>

3.2diable禁用语法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
 		<title>禁用</title>
	</head>
	<body>
		<form >
	   		未禁用<input type="text"  />
	       	禁用<input type="text"  disabled="disabled"  />
	       	<br/>
	       	未禁用	<textarea rows="5" cols="10" ></textarea>
	       	禁用<textarea rows="5" cols="10"  disabled="disabled"></textarea>
		</form>
	</body>
</html>

4.占位符、必填属性 4.1placeholder属性适用于以下的 <input> 类型:text、email 以及 password 语法:

&lt;input type="text" placeholder="提示信息内容" &gt;

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;提示&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;form &gt;
	   		&lt;input type="text"  placeholder="用户名"/&gt;
		&lt;/form&gt;
	&lt;/body&gt;
&lt;/html&gt;

4.2required当表单元素使用此属性就说明该元素是必填字段。

语法:

&lt;input type="text" required="required"&gt;

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;必填&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;form &gt;
	   		&lt;input type="text"  required="required"/&gt;
	   		&lt;input type="submit" /&gt;
		&lt;/form&gt;
	&lt;/body&gt;
&lt;/html&gt;
赞(11)
未经允许不得转载:工具盒子 » form表单的使用