HTML学习笔记四:表单(二)高级元素

前言

我在上一篇博文中写了表单的初级应用,都是一些基本的表单类型,除了这些基本元素外,还有一些高级元素,比如url,enail,time,range,required等,将下面一一介绍。大家可以去
HTML学习笔记摘要目录参考来看我关于HTML的其他笔记。

url属性

url属性适用于说明网站网址的。就是在表单内定义一个输入网址的地方,改地方的内容在提交后会被自动验证url的值。比如你输的不是网址,它可能会提醒你输入正确网址之类的。

<input type="url" name="userurl"/>
<form >
	输入网址:<br>
	<input type="url" name="userurl"/>
</form>

在这里插入图片描述

email属性

email属性就是让浏览者输入email地址啦~且在提交表单时会自动验证email域的值。

<form >
	输入email:<br>
	<input type="email" name="user_email"/>
</form>

就是改个type的区别了,就不多说了。

date属性和time属性

HTML5新增了日期和时间输入类型,包括date , datetime , datetime_local , month , week和time。它们的含义见下表:
在这里插入图片描述
还是改个type的事儿,我们就看个date好了:

<form >
	<br>
	请选择你上次和小姑娘去看电影的时间:<br>
	<input type="date" name="user_date"/>
</form>

在这里插入图片描述
上次我约小姑娘去看的电影是《我的祖国》,不过看完电影也没成。。。T_T

number属性

number属性提供了一个输入数字的输入类型,用户可以直接输数字,也可以按上下符号来选择数字:

<form >
	<br>
	输入你搞过几个对象:
	<input type="number" name="user_number"/>
</form>

在这里插入图片描述

range属性

range属性显示为一个滑动条控件,与number属性一样,用户可以使用max,min属性和step属性来控制范围和步长。

<form >
	<br>
	输入你搞过几个对象:
	<input type="range" name="user_range" min="2" max="10" step="1"/>
</form>

在这里插入图片描述
我们可以看到,滑动块默认是在滑动条中点的,我们还发现没有数字显示~然后就很难受,就CSDN了一下,发现要是想显示数字还要自定义函数,还涉及js和css,有点小复杂,看懂了也不会用,只能慢慢继续学先不管这个了。@T_T@
大家想看看的可以点这儿:html5实现滑块功能之------type="range"属性

required属性

required属性规定必须在提交钱填写输入域(不能为空),required属性适用于以下类型的输入属性:text,search,url,email,password,date,pickers,number,checkbox,radio等。

<form >
	下面输入用户登陆信息:<br>
	用户名称:<input type="text" name="user" required="required"><br>
	用户密码:<input type="password" name="password" required><br>
	<input type="submit" value="登陆">
</form>

在这里插入图片描述
我们可以看到不填就会有如上提示。如果细心的小伙伴看代码的话可以发现

用户密码:<input type="password" name="password" required><br>

这一句中required="required"简写成了required,这是完全可以的。

练习

在这里插入图片描述
表单就到这里了,然后拿个人简介页面来练练手吧,上面截图部分都是提交内容,所以要把它们都放到表单区域。也就是< form >< /form >里。

<form >
	昵称:<input type="text" name="user" required="required"><br>
	实名:<input type="text" name="name_user"><br>
	生日:<input type="date" name="birthday"><br>
	地区:<select name="diqu" size="1">
		<option value="diqu1">四川</option>
		<option value="diqu2">北京</option>
		<option value="diqu3">浙江</option>
	    </select><br>
	行业:<input type="text" name="job"><br>
	职位:<input type="text" name="zhiwei"><br>
	简介:<textarea name="introduction" cols="50" rows="5"></textarea><br>
	<input type="submit" value="提交">
</form>

在这里插入图片描述

小结

好了,表单就到此为止啦,我们现在只能做一个又丑又简陋的页面,大概相当于C语言刚学到写计算器,然后还要好多好多东西,我现在一点也不觉得HTML简单了,因为它东西太多了,就像Python,都说Python简单,但真敢说会的有几个呢?所以好好加油叭!下一篇博文我们就可以学插入音频和视频文件了~
觉得有帮助的话,就点个赞关注一下吧,欢迎评论哦。

发布了26 篇原创文章 · 获赞 40 · 访问量 3639

猜你喜欢

转载自blog.csdn.net/qq_43667130/article/details/103285271
今日推荐