html最后一帖

1.表单的基本实现

单行文本框

	<tr>
		<td>用户名</td>
		<td><input type="text" name="uesrname" placeholder="请输入用户名"><br></td>
	</tr>
	<!--placeholder 为输入框的提示文字，当点击输入时，会自动消失-->

密码框

	<tr>
		<td>密码</td>
		<td><input type="password" name="password" placeholder="请输入密码"></td>
	</tr>

单选按钮组

	<tr>
		<td>性别</td>
		<td>
			<label for="gender-male">
				<input id="gender-male" type="radio" name="gender" value="male">男
			</label>
			<label for="gender-female">
				<input id="gender-female" type="radio" name="gender" value="female" checked >女
			</label>
		</td>
	</tr>
<!--label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。-->
<!--<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。-->

复选按钮

	<tr>
		<td>爱好</td>
		<td>
			<label for="hobby-basketball">
				<input id="hobby-basketball" type="checkbox" name="hobby" value="basketball" checked>篮球
			</label>

			<label for="hobby-football">
				<input id="hobby-football" type="checkbox" name="hobby" value="football">足球
			</label>

			<label for="hobby-read">
				<input id="hobby-read" type="checkbox" name="hobby" value="read">阅读
			</label>
		</td>
	</tr>

下拉菜单列表

	<tr>
		<td>地址</td>
		<td>
			<span>
				<select name="shengfen" style="width:80px">
					<option value="gansu">甘肃</option>
					<option value="jiangxi">江西</option>
					<option value="shanxi">山西</option>
				</select>
				省
			</span>
			<span>
			<select name="shi" style="width:80px">
					<option value="datong">大同</option>
					<option value="taiyuan">太原</option>
					<option value="linfen">临汾</option>
				</select>
				市
			</span>
			<span>县/区</span>
			<input type="text">
		</td>
	</tr>

多行文本框

	<tr>
		<td >简介</td>
		<td >
			<textarea name="description" cols="30" rows="5" placeholder="请输入简介">
			</textarea>
		</td>
	</tr><br>

附件按钮

<tr>
			<td >头像</td>
			<td >
				<input type="file" name="file"> <br>
			</td>
</tr><br>

插件按钮

   <tr>
			<td>出生日期</td>
			<td>
				<input type="date" name="birth">
			</td>
</tr>

提交按钮

<tr>
			<td colspan="2">
				<input type="submit" value="注册">
			</td>
</tr>

2.表单元素

input 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

1. input总结

单行文本框<input type="text">
密码框<input type="password">
单选按钮<input type="radio">
复选按钮<input type="checkbox">
附件<input type="file">
提交按钮<input type="submit">

h5拓展：搜索框，日期框，数字框，email框…

<input type="search">
<input type="date">
<input type="number">
<input type="email">

input的属性

type          不同的值对性不同的形式
name 		参数的key(不能缺省)
value 	参数的value(按钮的时候不能缺省)
placeholder 	提示语
checked 	用在单选按钮和复选按钮中表示默认选中
selected	用在下拉菜单中表示默认选中

【注意】：checked和selected可以为单值属性

2. select

select 元素可创建单选或多选菜单。
select 元素中的 标签用于定义列表中的可用选项。

下拉菜单

			<select name="shenfen">
				<option value="shanxi">山西</option>
				<option value="jiangxi">江西</option>
				<option value="甘肃">甘肃</option>
			</select>

select中的子元素一定为option,option中一般要添加value表示当选中该元素的时候，select的参数值为该value值,option中的value值可以不设置，那么value默认为文本值

属性

• size，每次显示的个数
• multiple，是否可以多选
• selected，选中

3. textarea

textarea标签定义多行的文本输入控件，即多行文本域。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体
可以通过 cols 和 rows 属性来规定 textarea 的尺寸

<textarea name="" placeholder="" cols="30" rows="10"></textarea>

4. 插件（日期选择，地址选择，富文本）

3.实体

空格  
大于号 >
小于号 <
版权号©
删除（叉）×

4.其他表单

1.details

details标签用于描述文档或文档某个部分的细节。

<details>
        <summary>111</summary>
        <summary>222</summary>
</details>

2.datalist

datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
使用 input 元素的 list 属性来绑定 datalist。

<input type="text" name="" list="test">
<datalist id="test">
    <option>111</option>
    <option>222</option>
</datalist>

3.radio

input标签中type的属性值，当<input type="radio">时表示定义单选按钮
其中checked属性表示默认选中

4.多行文本框

<textarea rows="10" cols="20" wrap="off" readonly=""></textarea>

属性：

• wrap：是否自动换行

   	wrap=off 不换行
   	wrap=hard 自动硬换行，换行元素一起被传到服务器
   	wrap=soft 软换行
  

• readonly：只读

• disabled：禁用