【JavaWeb基础 · 表单标签(一)】

214 阅读4分钟

“这是我参与8月更文挑战的第10天,活动详情查看: 8月更文挑战

<form></form>标签

<form> 标签用于创建供用户输入的 HTML 表单。创建一个表单区域,表单区域中可以有多种表单元素。比如:<input>,<select>,<textarea>等等。

我们先来看form标签的属性。

  属性            	值                                       	描述                                      
  accept        	MIME_type                               	HTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的) 
  accept-charset	character_set                           	规定服务器可处理的表单数据字符集。                       
  action        	URL                                     	规定当提交表单时向何处发送表单数据。                      
  autocomplete  	on off                                  	规定是否启用表单的自动完成功能。                        
  enctype       	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)
  method        	get post                                	规定用于发送表单数据的 HTTP 方法。                    
  name          	text                                    	规定表单的名称。                                
  novalidate    	novalidate                              	如果使用该属性,则提交表单时不进行验证。                    
  target        	_blank _self _parent _top               	规定在何处打开 action URL。                     

<input>标签

<input> 标签规定了用户可以在其中输入数据的输入字段。

输入字段可通过多种方式改变,取决于 type 属性。它可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

  属性            	值                                       	描述                                      
  accept        	audio/video/image/*MIME_type            	规定通过文件上传来提交的文件的类型。(只针对type="file")      
  alt           	text                                    	定义图像输入的替代文本。 (只针对type="image")          
  autocomplete  	onoff                                   	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
  autofocus     	autofocus                               	属性规定当页面加载时 <input> 元素应该自动获得焦点。          
  checked       	checked                                 	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
  disabled      	disabled                                	disabled 属性规定应该禁用的 <input> 元素。          
  form          	form_id                                 	form 属性规定 <input> 元素所属的一个或多个表单。         
  formaction    	URL                                     	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
  formenctype   	application/x-www-form-urlencodedmultipart/form-datatext/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
  formmethod    	getpost                                 	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
  formnovalidate	formnovalidate                          	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
  formtarget    	_blank_self_parent_topframename         	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
  height        	pixels                                  	规定 <input>元素的高度。(只针对type="image")       
  list          	datalist_id                             	属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
  max           	numberdate                              	属性规定 <input> 元素的最大值。                    
  maxlength     	number                                  	属性规定 <input> 元素中允许的最大字符数。               
  min           	numberdate                              	属性规定 <input>元素的最小值。                     
  multiple      	multiple                                	属性规定允许用户输入到 <input> 元素的多个值。             
  name          	text                                    	name 属性规定 <input> 元素的名称。                
  pattern       	regexp                                  	pattern 属性规定用于验证 <input> 元素的值的正则表达式。    
  placeholder   	text                                    	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
  readonly      	readonly                                	readonly 属性规定输入字段是只读的。                  
  required      	required                                	属性规定必需在提交表单之前填写输入字段。                    
  size          	number                                  	size 属性规定以字符数计的 <input> 元素的可见宽度。        
  src           	URL                                     	src 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")
  step          	number                                  	step 属性规定 <input> 元素的合法数字间隔。            
  type          	button checkbox color date datetime 
                        datetime-local email file hidden image month 
                        number password     radio range reset search submit 
                        tel text time url week	                        type 属性规定要显示的 <input> 元素的类型。            
  value         	text                                    	指定 <input> 元素 value 的值。                 
  width         	pixels                                  	width 属性规定 <input> 元素的宽度。 (只针对type="image")

来实现一下吧。

创建文本字段:
Name : <input type="text" name="name"><br>
Age : <input type="text" name="age">
创建密码字段
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
创建单选按钮
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
创建复选框
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
创建下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
创建带有默认值的下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
创建提交按钮
<input type="submit" value="提交">
写在最后

以上内容如有不正之处,欢迎掘友们批评指正。

好了,关于input标签我们就学习到这里了,快来动手试试吧!