创建表单以及表单元素的使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了创建表单以及表单元素的使用相关的知识,希望对你有一定的参考价值。
创建表单
其基本语法
<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="color1">
red<p>
<input type=radio name=1 value="color3">
BLUE<p>
<input type=radio name=1 value="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=提交><br>
</form>
<form>
<br/>
提交购买商品的生产日期:
<br>
<input type="date" name="user_date" />
</form>
</body>
</html>
以上是关于创建表单以及表单元素的使用的主要内容,如果未能解决你的问题,请参考以下文章
jQuery serializeArray 没有获取动态创建的表单元素