HTML之(表单的常用标签)

表单

1.简介

表单是一个包含若干表单元素的区域,用于回去不同类型东东用记信息

表单元素是允许用户在表单中输入信息的元素,如:文本框、密码框、单选按钮、复选框、下拉按钮、列表等

2.表单结构
2.1表单的语法
<form acition="" method="">
    多个表单元素
form>
2.2form标签

用来定义表单,可以包含多个表单元素

常用属性:

  • action提交数据给处理,即处理数据的程序,默认为当前页面,并且以查询字符串的形式来表现

  • method提交数据的方式,取值:get(默认)、post

    get和post的区别:

    ​ get:以查询字符串形式提交,在地址栏中能够看到,长度有限制,不安全

    ​ post:以表单数据组形式提交,在地址栏中看不到,长度无限制,安全

  • enctype:提交数据的编码,取值:application/x-www-form-urlencode(默认)、multipart/form-data(文件上传)

3.表单元素

大多数表单元素都是使用标签来定义,通过设置type属性来定义不同的表单元素

<input type="表单元素的类型" name="名称" value="默认值" size="宽度"> 
表单元素的类型 含义 说明
text 单行文本框 省略时默认就是text
password 密码框 输入时以点号显示,安全
redio 单选按钮 只能选择其中一个
checkbox 复选框 可以同时选择多个
submit 提交按钮 提交表单数据
reset 重置按钮 重置表单元素的初始值
image 图像按钮 可以使用图片作为按钮
button 普通按钮 默认情况下无功能
file 文件选择器 选择要上传的文件
hidden 隐藏域 在页面上不显示,但是会提交,可以用来存储数据
3.1单行文本框

常用属性:

  • name属性:名称,很重要,如果没有指定name,则该表单元素的数据是无法提交的
  • value属性:当用户没有输入数据时,文本框中的默认值
  • size文本框显示宽度
  • maxlength最大字符数,默认字符数
  • readonly:只读readonly=“readonly”,可以简写readonly,即只写属性名
  • disabled:不可用,禁用disbled=“disabled” 可以简写disabled,完全被禁用

​ readonly和disabled的区别:readonly的数据会提交,而disabled的数据不会提交

3.2单选按钮

常用属性

  • name:名称,多个radio的name属性必须相同,才可以实现互斥(单选)
  • value:值
  • checked是否被选中,两种状态,选中,未选中 checked="checked"简写“checked”
3.3 复选框

常用属性与radio类似

3.4 文件选择器

常用属性:

  • name属性:名称

  • accept设置可以选择的文件类型,用来限制上传文件的类型

    使用MIME格式字符串对资源类型进行限制

    常用MIME类型:

    • 纯文本:text/plain text/heml text/xml
    • 图像:image/png image/gif image/jpeg

代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	<h2>用户注册h2>
	<form action="" method="get" enctype="multipart/form-data">
		用户名:<input type="text" name="usrname" value="张杰">
		<br>
		密  码:<input type="password" name="pwd">
		<br>
		年  龄:<input type="text" name="age" value="18" enabled>
		<br>
		性  别:<input type="radio" name="sex" value="male" checked>
				<img src="../../img/male.gif" alt="">
			    <input type="radio" name="sex" value="female">
			    <img src="../../img/female.gif" alt="">
		<br>
		爱  好:
			    <input type="checkbox" name="hobby" value="eat">吃饭
			    <input type="checkbox" name="hobby" value="sleep">睡觉
			    <input type="checkbox" name="hobby" value="doudou">打豆豆
		<br>
		头  像:
				<input type="file" name="head" accept="image/jpeg">
				<input type="hidden" name="usr_id" value="9528">
		<hr>
		<input type="submit">
		<input type="reset">
		<hr>
		<input type="image" src="../../img/submit.gif">
		<input type="image" src="../../img/reset.gif">
		<hr>
		<input type="button" value="普通按钮">
	form>
body>
html>

案例:HTML之(表单的常用标签)_第1张图片

4.特殊表单元素
表单元素 含义 说明
select 下拉列表
option 列表选项
optgroup 选项组 用来对option分组
textarea 文本域/多行文本框 用于创建一个多行文本框
4.1 下拉列表

select 常用属性:

  • name属性
  • size:下拉列表所显示的行数,同时显示多个选项
  • multiple允许同时选择多个

option常用属性:

  • value选项值
  • selected设置默认选中的项

optgroup常用属性:

  • table分组的标题
4.2 文本域

常用属性:

  • name:名称
  • rows行数
  • cols列数

代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	<form action="">
		学历
		<select name="degree">
			<option value="0">--请选择学历--option>
			<option value="dazhuan">大专option>
			<option value="benke" selected>本科option>
			<option value="yanjiusheng">研究生option>
			<option value="shuoshi">硕士option>
		select>
		<br>

		城市:
		<select name="">
			<optgroup label="山西省"> 
				<option value="taiyuan">太原option>
				<option value="datong">大同option>
				<option value="changzhi">长治option>
			optgroup>
			<optgroup label="山东省">
				<option value="jinan">济南option>
				<option value="qingdao">青岛option>
				<option value="nanjing">南京option>
			optgroup>
			<optgroup label="江苏省">
				<option value="rizhao">日照option>
				<option value="yangzhou">杨洲option>
				<option value="xuzhou">徐州option>
			optgroup>

		select>
		<br>
		个人简介:
		<textarea name="intrduce" >textarea>
		<br>
		服务协议:
		<textarea name="intrduce" rows="10" cols="20" eadonly>
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
		textarea>

		<hr>
		<input type="submit">

	form>
body>
html>

案例:HTML之(表单的常用标签)_第2张图片

你可能感兴趣的:(html)