PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > html的表单

html的表单

蔚蓝世纪
蔚蓝世纪 原创
2020年04月08日 19:21:40 1109浏览

一.什么是表单?

html表单是网页中数据采集的工具。

二、表单的组成

html表单由表单标签<form>,表单域<input>,表单按钮<button>三部分构成。

三、表单标签<form>的属性

1.”name”:表单的名称
2.”action”:当表单提交时向何处发送表单数据
3.”method”:“get”通过url地址传送参数到服务器; “post”从后台传送数据到服务器
4”target”:指定“action”属性中url页面的打开方式,“_blank”在新窗口打开,“_self”在当前窗口打开,默认使用“_self”方式打开。

四、表单域<input>的属性

1.”type”:指定元素的类型。

标签type的属性值包含:

(1)”text”:单行文本

<input type="text" name="username" value="元素的默认值,不能为空"/>

(2)”password”:密码字段

<input type="password" name="password" id="pssword"/>

(3)”radio”:单选按钮

<input type="radio" name="gender" value="male"/><label for="mal">男</label>

<input type="radio" name="gender" value="female"/><label for="femal">女</label>

(4)”checkbox”:复选按钮

<input type="checkbox" name="hobby[]" id="game" value="php"/>游戏

(5)”button”:自定认按钮

<input type="button" value="点击"/>

(6)”submit”:提交按钮

<input tpye="submit" value="提交"/>

(7)”reset”:重置按钮

<input type="submit" value="重置"/>

(8)”file”:文件上传

<input type="file" name="user_pic" id="userpic"/>

(9)”image”:
(10)”hidden”:隐藏域

<input type="hidden" name="MAX_FILE_SIZE" value="8388608"/>

2.“name”:元素的名称
3.”id”:与指定元素的属性进行绑定使用,具有唯一性。
4.”value”:元素的默认值,可以做占位符。
5.”placeholder”:设置默认值,可以为用户提示信息。
6.”autofocus”:页面渲染时,可自动获取焦点。
7.”required”:为元素设置字段的必填项。

五、预定义的复合框:可以创建下拉列表

代码演示:

<section>
<label for="area">地区:</label>
<input type="text" name="area" list="areas" />
<datalist id="areas">
<option value="郑州市"></option>
<option value="许昌市"></option>
<option value="开封市"></option>
<option value="洛阳市"></option>
<option value="漯河市"></option>
<option value="南阳市"></option>
<option value="平顶山市"></option>
<option value="新郑市"></option>
<option value="信阳市"></option>
<option value="驻马店市"></option>
</datalist>
</section>
下拉列表运行效果:

六、表单运行效果图:

总结:

1.表单是网页制作的重点。要善于使用<label>标签,<input>是单标签,结尾不需要封闭。
2.将单选按钮放在div里面,方便后期处理。
3.设置年龄、工资等数据时,需要添加“min”,”max”属性对数据做限制。
4.下拉列表<datalist>标签中需要添加“id”属性来做元素指令的绑定。
5.没有加样式的表格真心丑。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议