首页 > 代码库 > 创建表单以及表单元素的使用
创建表单以及表单元素的使用
创建表单
其基本语法
<form action="url" method=get|post>
<input type=submit> <input type=reset>
</form>
其中应用的属性
action=url：定义提交表单的格式，可以是url或者电子邮件地
method=get|post：指明提交表单HTTP的方法
在网页中提供一个空格
text:定义单行文本输入框
Password:定义密码
rows：属性定义多行文本框的高度，单位是单个字符宽度
cols：属性定义多行文本框的宽度，单位是单个字符宽度
textarea：定义一个多行文本输入框
Checkbox:定义复选框
Radio:定义单选按钮
Image:定义图片按钮
Submit:定义提交按钮
reset：定义重置按钮
附:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>学习表单</title>
</head>
<body>
建立用户名称和用户密码的表单
<form action=url method=POST>
用户名称:
<input type=text name=姓名><br>
用户密码:
<input type=password name=密码><br>
</form>
<br><br><br>
定义用户提交和重置的按钮
<form method=Post><br>
<input type=submit> <input type=reset>
</form>
<br><br><br>
创建多选按钮
<form method=post >
<input type=checkbox name=1>
red<p>
<input type=checkbox name=2>
blue<p>
<input type=checkbox name=3>
Orange<p>
<input type=submit> <input type=reset>
</form>
创建单选按钮
<form method=post>
<input type=radio name=1 value="http://www.mamicode.com/color1">
red<p>
<input type=radio name=1 value="http://www.mamicode.com/color3">
BLUE<p>
<input type=radio name=1 value="http://www.mamicode.com/color2">
Orange<p>
<input type=submit> <input type=reset>
</form>
建立一个多行文本输入框
<form>
留言板：
<textarea name=liuyanban rows=5 cols=60>
</textarea>
<P>
<input type=submit> <input type=reset>
</form>
对于很长的行是否进行换行的设置
<form >
留言板：<br>
<textarea wrap=soft name=liuyanban rows=5 cols=25> </textarea><P>
<input type=submit> <input type=reset>
</form>
下拉列表select的使用（1）
<form>
<select name=color>
<option>blue
<option>red
<option>Orange
</select><p>
<input type=submit> <input type=reset>
</form>
下拉列表select的使用（2）
<form>
<select name=color size=3>
<option>blue
<option>red
<option>Orange
</select><p>
<input type=submit> <input type=reset>
</form>
下拉列表select的使用（3）
<form>
<select name=color size=4 multiple>
<option>blue
<option>red
<option>Orange
<option>blue
<option>red
<option>Orange
</select><p>
<input type=submit> <input type=reset>
</form>
请输入你的电子邮箱地址：（带判断@）<br>
<input type=email name=user_email/><br>
<input type=submit value=http://www.mamicode.com/提交>
</form>
<form>
<br/>
提交购买商品的生产日期：
<br>
<input type="date" name="user_date" />
</form>
</body>
</html>
创建表单以及表单元素的使用