HTML.7表单

表单


表单结构

<form>:表单空间位于<form>元素中

action:每个<form>元素都需要一个action特性,奇特性值是服务器上一个页面的URL。

method:表单的提交方式可以采用以下两种方法之一:get或post。

<form action="网页" method="get">

<p></p>
</form>


单行文本框

<input>:<input>元素用来创建多种不同的表单控件,其type的特性值决定了他要创建那种控件。

type="text":当type特性的值为text时,<input>元素会创建一个单行文本框。

name:名称

maxlength:用来限制字符的数量


 

密码框

<input>

type="password":掩盖字符

name:表明密码框的名称

size,maxlength


 

文本域(多行文本框)

<textarea>

<form action="网页">

<p></p>

<textarea name=""  sols=""  rows="">

</textarea>

</form>


 

 单选按钮

<input>

type="radio"

name

value

checked

<form action="网页

<br />标题

<input type="radio" name="genre" value="rock" checked="checked" />

<input type="radio" name="genre" value="pop" />

<input type="radio" name="genre" value="jazz" /> 

 </p>

</form>


 

复选框

<input>

type="checkbox"

 

name

value

checked

 

<form action="网页">

<p>标题

<br />

<input type="checkbox" name="service" value="itunes" checked="checked" />

<input type="checkbox" name="service" value="lastfm" />

<input type="checkbox" name="service" value="spotify" />

</p>

</form>


 

下拉列表

<select>:让用户在下拉列表中选择其中一个选项

name

<option>:再起始标签和结束标签之间的文字将显示在下拉列表中

value

selected

 

<form action="网页">

<p>标题</p>

<select name="devices">

<option value="ipod">1</option>

<option value="radio">2</option>

<option value="computer">3</option>

</select>

</form>


多选框

<select>

size

multiple

 

<form action="网页">

<p>标题</p>

<select name="instruments" size="3" multiple="multiple">

<option value="guitar" selected="selected">1</option>

<option value="drums">2</option>

<option value="keyboard" selected="selected">3</option>

<option value="bass">4</option>

</select>

</form>


文件上传域

<input>

type="file"

 

<form action="网页" method="post">

<p></p>

<input type="file" name="">

<br/>

<input type="file" name="">


 

提交按钮

<input>:将表单发送到服务器

name

value

 

<form action="网页">

<p>标题</p>

<input type="text" name="email" />

<input type="submit" name="subscribe" value="Subscribe" />

</form> 


图像按钮

<input>

type="image"

<form action="网页">

<p>标题</p>

<input type="text" name="email" />

<input type="image" src="地址 width="100" height="20" />

</form>


按钮和隐藏控件

<button>可以再起始标签<button>和结束标签<button>之间接使用文本图像

<input>

type="hidden"

<form action="网页">

<button><img src="images/add.gif" alt="add" width="10" height="10" /></button>

<input type="hidden" name="bookmark" value="lyrics" /> </form>


 

标签表单控件

<ladel>

for

 

<form action="http://www.example.com/subscribe.php">

<label>3 <input type="text" name="age" /></label>

<br/ >

<input id="female" type="radio" name="gender" value="f">

<label for="female">1</label>

 

<input id="male" type="radio" name="gender" value="m">

<label for="male">2</label>

</form>


组合表单元素

<fieldset>

<lrgend>


 

日期控件

<input>

type="date"

 

电子邮件和URL输入控键

<input>

type="email"

type="url"

 

搜索输入控件

<input>

type="search"

placeholder

 

posted @ 2018-03-24 17:01  HL()  阅读(185)  评论(0编辑  收藏  举报