html的表单

一.什么是表单？

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.没有加样式的表格真心丑。