表单元素

Posted haoxuan-li

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单元素相关的知识,希望对你有一定的参考价值。

表单

HTML 表单用于搜集不同类型的用户输入。html5 Input,拥有多个新的表单输入类型,提供了更好的输入控制和验证。

Input类型

编辑
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
1.Input 类型- email
email 类型用于应该包含e-mail 地址的输入域。在提交表单时,会自动验证email 域的值。
2.Input 类型- url
url 类型用于应该包含URL 地址的输入域。在提交表单时,会自动验证url 域的值。
3.Input 类型- number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定:
4.Input 类型- range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定:
5.Input 类型- Date Pickers(数据检出器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
6.Input 类型- search
search 类型用于搜索域,比如站点搜索或Google 搜索。
search 域显示为常规的文本域。[2] 

输入

编辑
多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域

当用户要在表单中键入字母、数字等内容时,就会用到文本域(text fields)。
1
2
3
4
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
浏览器显示如下:
技术分享图片
注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。[1] 

单选按钮

当用户从若干给定的的选择中选取其一时,就会用到单选框(radio buttons)。
1
2
3
4
<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>
浏览器显示如下:
1
2
Male
Female
注意,只能从中选取其一。[1] 
如图:
技术分享图片

复选框

当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框(checkboxes)。
1
2
3
4
5
<form>
<input type="checkbox" name="bike" />I have a bike
<br />
<input type="checkbox" name="car" />I have a car
</form>
浏览器显示如下:
1
2
I have a bike
I have a car
 

密码字段

密码字段通过标签 <input type="password"> 来定义:[3]
1
2
3
<form>
Password: <input type="password" name="pwd">
</form>
注意:密码字段字符不会明文显示,而是以星号或圆点替代。
OCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
<form>
	<input><!-- 单行文本框 -->
	<br>

	
	<input type="text"><!-- <-input默认值就是text --> 
	<br>
	<input type="text" value="靠谱学院"><!-- 占位符 -->
	<br>
	<input type="text" placeholder="靠谱学院"><!-- 不占文本框内的 -->
	<br>
	<input type="text" maxlength="20"><!-- 最大能输入的字符 -->
	<br>
	<input type="text" maxlength="20" size="50">
	<br>
	<input type="text" placeholder="靠谱学院" readonly><!-- readonly只能读不能进行操作 -->
	<br>
	<input type="password" placeholder="密码">
	<br>
	<textarea rows="20">
		aaaaaaaaaaaaaaaaa
	</textarea><!-- 多行文本框  rows 是行宽-->
</form>
</body>
</html>

元素的使用

1、按钮属性

  type=“button”

  <button></button>

2、range型和input型

3、checkbox型和input元素

4、用input生成一组固定选项

5、生成选项列表(select)和数据列表(datalist)

区别:button>input button>input submin

分析:

  1、原理上来讲:button元素和 type=“button”实际应用还是有区别的,button要比input 按钮的功能多,button元素可以当任何按钮来使用,使用范围更广泛。

  2、input  button 和 input submit 的区别:submit 用于提交表单,使用范围比 input button要小一点。

  3、input button 通常用于和 java script 一起使用并作为绑定事件处理

  4、input submit 用于提交表单时,必须生命form里面的method 属性,最好也添加action属性(涉及php知识)

得出结论:

  使用范围和功能:button>input button>>input submin

技术分享图片
1 <input type=button value="按钮">
2     <button>按钮</button>><!-- 跟js合作并且用来绑定事件的 -->
3     <input type="submit" value="按钮"><!-- 提交表单 -->
4 </form>
代码分析

checkbox型和input元素

<input type="number" min="-100" max="200" value="0">
<input type="checkbox" >记住我
<input type="radio" >选择

用input生成一组固定选项

谁最帅
<input type="radio" name="a">浩轩
<input type="radio" name="a">浩轩
<input type="radio" name="a">浩轩

生成选项列表(select)和数据列表(datalist)

<input type="text" list="datalist1">
	<datalist id="datalist1">
		<option>你猜</option>
		<option>你看我猜不</option>
		<option>不好玩</option>
	</datalist>

  

 

 

 





以上是关于表单元素的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构

CSS代码片段

CSS代码片段

css有用的代码片段

SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded;charset=UTF-8‘ not supported“(代码片段