首页 > 代码库 > 创建表单以及表单元素的使用

创建表单以及表单元素的使用

创建表单

 

其基本语法

<form action="url" method=get|post>
<input type=submit> <input type=reset>
</form>

 

其中应用的属性

action=url:定义提交表单的格式,可以是url或者电子邮件地

method=get|post:指明提交表单HTTP的方法

&nbsp;在网页中提供一个空格

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>&nbsp;<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>&nbsp;<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>&nbsp;<input type=reset>

</form>

 

建立一个多行文本输入框

 

<form>

留言板:

<textarea name=liuyanban rows=5 cols=60>

</textarea>

<P>

<input type=submit>&nbsp;<input type=reset>

</form>

 

对于很长的行是否进行换行的设置

<form >

留言板:<br>

<textarea wrap=soft name=liuyanban rows=5 cols=25> </textarea><P>

<input type=submit>&nbsp;<input type=reset>

</form>

 下拉列表select的使用(1)

 <form>

<select name=color>

        <option>blue

        <option>red

        <option>Orange

</select><p>

<input type=submit>&nbsp;<input type=reset>

</form>

下拉列表select的使用(2)

<form>

<select name=color size=3>

        <option>blue

        <option>red

        <option>Orange

</select><p>

<input type=submit>&nbsp;<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>&nbsp;<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>

创建表单以及表单元素的使用