从零开始自学HTML(8):HTML表单

要使网站拥有会员注册、内容搜索等功能,就需要使用到表单,html表单可以搜集客户端的输入信息,给网页增加交互功能。

输入框、文本域、单选框、多选框都属于html表单,可能本章有点难度,不过主要是概念有点多,有些你没学过的新知识,可以慢慢来理解。

表单标签 form

在网页中使用<form></form>标签来创建表单,在标签内的一切都是表单的内容。常用的属性有两个:action和method。

action用于指定表单提交的地址,该地址会将表单数据进行处理。如index.php。

method用于指定数据提交时使用的方法,一般只使用get和post。

网页中使用最多的标签是输入标签input,输入的类型则由type来定义,下面来一一讲解:

文本字段 Text

input标签中使用最多的就是text,通过它可以输入字符(包括字母、数字、汉字)和文本。

<input type="text">

密码字段 Password

密码字段属于特殊的文本字段,和文本字段基本相同,唯一不同点在于输入的字符全部以星号*来显示。

<input type="password">

单选按钮 Radio

单选按钮,在给出的多个选项中有且只能选择一个。必须设置value属性。

<input type="Radio" value="必须设置">

多选按钮 Checkboxes

多选按钮,或者叫复选框,在给定的多个选项中选择一个或多个按钮。

<input type="checkbox">

提交按钮 Submit

用来提交表单的内容到action所指的文件中。value属性用于指定按钮中显示的内容。

<input type="submit" value="提交">


说可以这么多,来看看代码:

<form action="index.php" method="get">
	姓名:<input type="text"><br />
	 手机号:<input type="text"><br />
	锁屏密码:<input type="password"><br />
	故乡:<br />
		<input type="radio" name="gx" value="sh">上海<br />
		<input type="radio" name="gx" value="gz">广州<br />
		<input type="radio" name="gx" value="bj">北京<br />
	爱好:<br />
		<input type="checkbox">书法<br />
		<input type="checkbox">跳舞<br />
		<input type="checkbox">画画<br />
		<input type="checkbox">游泳<br />
	<input type="submit" value="提交">
</form>

代码效果展示:

姓名:

手机号:

锁屏密码:

故乡:

上海

广州

北京

爱好:

书法

跳舞

画画

游泳


可以看到有些地方我们添加了name属性,其实每个表单标签都可以添加name属性,也最好都添加。

而value属性也是大部分标签建议添加的属性。

© 版权声明
THE END
喜欢就支持以下吧
点赞1 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容