HTMLl列表、表单

最新推荐文章于 2023-11-30 23:30:59 发布

thigdo

最新推荐文章于 2023-11-30 23:30:59 发布

阅读量2.3k

点赞数 1

文章标签： input action apple browser html list

HTML 列表

HTML支持有序、无序和定义列表

无序列表<ul;>

Coffee
Milk

         <ul>
		<li>
			Coffee
		</li>
		<li>
			Milk
		</li>
	</ul>

有序列表<ol;>

Coffee
Milk

	<ol>
		<li>
			Coffee
		</li>
		<li>
			Milk
		</li>
	</ol>

定义列表<dl;>

Coffee

Black hot drink

Milk

White cold drink

	</p>
	<dl>
		<dt>
			Coffee
		</dt>
		<dd>
			Black hot drink
		</dd>
		<dt>
			Milk
		</dt>
		<dd>
			White cold drink
		</dd>
	</dl>

实例1. 不同类型的无序列表

Disc bullet list

Apple
Banana
Lemmon
Orange

Circle bullet list

Apple
Banana
Lemmon
Orange

Square bullet list

Apple
Banana
Lemmon
Orange

<h4>Disc bullet list</h4>
<ul type="disc">
 <li>Apple</li>
 <li>Banana</li>
 <li>Lemmon</li>
 <li>Orange</li>
</ul>
<h4>Circle bullet list</h4>
<ul type="circle">
 <li>Apple</li>
 <li>Banana</li>
 <li>Lemmon</li>
 <li>Orange</li>
</ul>
<h4>Square bullet list</h4>
<ul type="square">
 <li>Apple</li>
 <li>Banana</li>
 <li>Lemmon</li>
 <li>Orange</li>
</ul>

实例2. 不同类型的有序列表

Number

Apple
Banana
Lemmon
Orange

Alphabet

Apple
Banana
Lemmon
Orange

Lower case letters

Apple
Banana
Lemon
Orange

Roman Alphabet

Apple
Banana
Lemmon
Orange

Lower case roman alphabet

Apple
Banana
Lemmon
Orange

<h4>Number</h4>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Lemmon</li>
<li>Orange</li>
</ol>
<h4>Alphabet</h4>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Lemmon</li>
<li>Orange</li>
</ol>
<h4>Lower case letters</h4>
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Lemon</li>
<li>Orange</li>
</ol>
<h4>Roman Alphabet</h4>
<ol type="I">
<li>Apple</li>
<li>Banana</li>
<li>Lemmon</li>
<li>Orange</li>
</ol>
<h4>Lower case roman alphabet</h4>
<ol type="i">
<li>Apple</li>
<li>Banana</li>
<li>Lemmon</li>
<li>Orange</li>
</ol>

实例3. 嵌套列表

A nesting list

Coffee
Tea
- Red tea
- Green tea
Milk

<ul>
<li>Coffee</li>
<li>Tea</li>
 <ul>
 <li>Red tea</li>
 <li>Green tea</li>
 </ul>
</li>
<li>Milk</li>
</ul>

实例4. 嵌套列表2

Coffee
Tea
- Red Tea
- Green Tea
  - Chinese Tea
  - Africa Tea
Milk

<ul>
<li>Coffee</li>
<li>Tea
 <ul>
 <li>Red Tea</li>
 <li>Green Tea
   <ul>
   <li>Chinese Tea</li>
   <li>Africa Tea</li>
   </ul>
 </li>
 </ul>
</li>
<li>Milk</li>
</ul>

HTML 表单

用于搜集不同类型的用户输入

表单使用<form>定义

输入<input>，输入类型是由类型属性（type）定义的。常用类型：

文本域（Text Field）
单选按钮（Radio Buttons）
复选框（Checkboxes）

实例1. 文本域（Text field）

<form>
Name:
<input type="text" name="firstname">
<br />
Surname:
<input type="text" name="lastname">
</form>

实例2. 密码域

请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。

<form>
	User:<input type="text" name="user" /><br />
	Password:<input type="password" name="password">
</form>

实例3. 单选按钮

<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>

实例4. 复选框

<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>

实例5.Action属性

表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了：目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如在上面的文本框内键入几个字母，然后点击确认按钮，那么数据就会传送到“html_form_aciont.asp“的页面，该页面将显示输入结果。

实例6. 简单的下拉列表

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

实例7. 带预选值的下拉列表

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option></select>
</form>

实例8. 文本域（Textarea）

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow textarea inside a textarea

<p>
	This example cannot be edited because our editor uses a textarea for input, and your browser does not allow textarea inside a textarea
</p>
<p>
	<textarea rows="10" cols="30"></textarea>
</p>

实例9. 创建按钮

<form>
<input type="button" value="Hello world!">
</form>

实例10. Fieldset around data

健康信息：

<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>

实例11. 带有输入框和确认按钮的表单

<form action="/example/html/form_action.asp" method="get">
 <p>First name: <input type="text" name="fname" /></p>
 <p>Last name: <input type="text" name="lname" /></p>
 <input type="submit" value="Submit" />
</form>

实例12. 带有复选框的表单

<form name="input" action="/html/html_form_aciotn.asp" method="get">
I have a bike:<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>

实例13. 带单选框的表单

<form name="input" action="/html/html_form_action.asp" method="get">
	Male:<input type="radio" name="Sex" value="Male" checked="checked" /><br />
	Female:<input type="radio" name="Sex" value="Female" /><br />
	<input type="submit" value="Submit"/>
</form>

实例14. 发送邮件的表单

<form action="MAILTO: someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>This form will send email to W3SCHOOL.</h3>
Name:<br />
<input type="text" name="name" value="yourname" size="20">
Email:<br />
<input type="text" name="mail" value="yourmail" sieze="20">
Comment:<br />
<input type="text" name="comment" value="your comment size="40">
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>