html表单制作方法,附带Html表单的完整代码

作者:IT技术 | 时间:2018-10-28

什么是html表单?HTML  表单让用户填写和选择不同类型的数据 ,常用的比如创建文本域让用户输入文本,创建密码框让用户填写密码,下面就为大家讲解下Html表单的制作,最后会附带Html表单的完整代码。

什么是HTML表单?

表单是一个区域,用来包含各种表单元素,比如:文本域(textarea)、下拉列表select、单选框(radio-buttons)、复选框(checkboxes)等等。用户可以在表单元素中输入内容。

例如:

<form>
.
input 元素
.
</form>

制作html包含元素

(1)input元素

表示输入框,有多种形式,可以根据type属性来确定显示哪种输入框。

type属性的取值如下:

button    定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。    

checkbox    定义复选框。    

file    定义输入字段和 "浏览"按钮,供文件上传。    

hidden    定义隐藏的输入字段。    

image    定义图像形式的提交按钮。    

password    定义密码字段。该字段中的字符被掩码。    

radio    定义单选按钮。    

reset    定义重置按钮。重置按钮会清除表单中的所有数据。    

submit    定义提交按钮。提交按钮会把表单数据发送到服务器。    

text    定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。    

小提示:

1,对于input来说,它的type的默认值是text,表示单行文本

2,对于input,最好给它添加一个name属性,作用是用于将用户输入的内容提交给要处理这个数据的页面

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(www.woyoudaan.cn)</title> 
</head>
<body>
<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>
</body>
</html>

(2)select和option

用来实现下拉列表

实例代码如下:

<select>

<option>我有答案1</option>

<option>我有答案2</option>

<option>我有答案3</option>

</select>

(3)textarea

提供输入大量文本的输入框,比如,微博中发表状态,博客发表贴子等。

<textarea>

.

.

</textarea>

Html表单的完整代码

<center>
<table>
<caption style="text-decoration:underline;font-weight:bold;">请留下个人资料</caption>
<tr><td>姓名:</td><td><input type="text"></td></tr>
<tr><td>电话:</td><td><input type="text"></td></tr>
<tr><td>E-mail:</td><td><input type="text"></td></tr>
<tr><td>性别:</td><td><input type="radio" checked>男 <input type="radio">女</td></tr>
<tr><td>年龄:</td><td><select><option>20以下</option></select></td></tr>
<tr><td>留言版:</td><td><textarea></textarea></td></tr>
<tr><td>您的爱好:</td><td><input type="checkbox">运动 <input type="checkbox">阅读<br><input type="checkbox">听音乐 <input type="checkbox">旅游</td></tr>
</table>
<input type="submit" value="提交"> <input type="reset" value="全部重写">
</center>

提示:

<center>标签的作用是让表单居中显示。

看了上面的html表单制作方法和附带Html表单的完整代码,你学会怎么制作html表单了吗?