表单元素

最新推荐文章于 2021-10-08 15:57:56 发布

drunk喵咪

最新推荐文章于 2021-10-08 15:57:56 发布

阅读量235

点赞数

分类专栏： HTML 文章标签： html5 form

本文链接：https://blog.csdn.net/jdrunk/article/details/97794674

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、input

单行文本框

  <input type="text">

密码框

  <input type="password">

单选按钮

  <input type="radio">

复选按钮

  <input type="checkbox">

附件

  <input type="file">

提交按钮

  <input type="submit">

input属性

type
name 作为参数k值的存在
value
placeholder 提示语

<textarea placeholder="请输入简介" name="简介" id="" style="width:300px"></textarea>

在这里插入图片描述
文本框中灰色字体为提示语

checked 用在单选按钮和复选按钮中，表示默认选中

<label for="hobby_reading">
	<input id="gender_female" type="radio" name="gender" value="female" checked>女
</label>

selected 用在下拉列表中，表示默认选中

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

2、h5拓展

搜索框
日期框
数字框
email框

3、textarea文本框

属性：

wrap 通常情况下，用户在输入文本区域输入文本后，浏览器会将他们按照输入时的状态发送给服务器，按enter换行
值：
wrap=“off” 默认值
wrap=“virtual” 文本区自动换行，服务器中只有按enter的地方换行
wrap=“physical” 自动换行，服务器中可看到效果

 <textarea name="简介"  cols="30" rows="10" wrap="off">

disabled 输入域无法获取焦点，以灰色显示，在表单中不起任何作用
与select中disabled属性一样
cols 列数
rows 行数
alt 表单的提示文字
readonly 文本域可选择，不可修改

4、select下拉列表

option 定义列表的可用选项
autofocus 在页面加载后文本区域自动获得焦点

  	<input type="text" name="" autofocus>

在这里插入图片描述
焦点聚在文本框中

disabled 禁用该下拉列表

<select disabled="" >
  		<option value="1">1</option>
  		<option value="2">2</option>
  		<option value="3">3</option>
  		<option value="4">4</option>

  	</select>

在这里插入图片描述
页面变为灰色，不能使用

multiple 可选择多个选项

<select multiple="multiple" size="2" name="地区">
    <option value=" ">江西</option>
    <option value="">上海</option>
    <option value="">北京</option>
    <option value="">杭州</option>
  </select>

在这里插入图片描述
按住ctrl键，可以多选

name 下拉列表的名字
required 文本区域必填
注意：所有主流浏览器都不支持 required 属性。

<input type="text" name="" required>

在这里插入图片描述
此框必填

<select required >
  		<option value="1">1</option>
  		<option value="2">2</option>
  		<option value="3">3</option>
  		<option value="4">4</option>

  	</select>

size 下拉列表可见选项的数目

 <select size="2" name="地区">
    <option value=" ">江西</option>
    <option value="">上海</option>
    <option value="">北京</option>
    <option value="">杭州</option>
  </select>

在这里插入图片描述

optgroup 把相关的选项组合在一起

<select name="" id="">
    	<optgroup label="江西">江西</optgroup>
    	<option value="">九江</option>
    	<option value="">赣州</option>
    	<option value="">吉安</option>
    	<optgroup label="安徽">安徽</optgroup>
    	<option value="">合肥</option>
    	<option value="">xx1</option>
    	<option value="">xx2</option>
    	<optgroup label="广东">广东</optgroup>
    	<option value="">广州</option>
    	<option value="">惠州</option>
    	<option value="">龙门</option>
    </select>

5、思维导图
在这里插入图片描述
6、表单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
    <!-- 表单 -->
	<form action="/a.action">
	<table>
	     <!--用户名-->
		<tr>
			<td>用户名</td>
			<td><input placeholder="请输入用户名" type="text" name="user"></td>
		</tr>
		<!--密码-->
		<tr>
			<td>密码</td>
			<td><input type="password" name="password"></td>
		</tr>
		<!--重复密码-->
		<tr>
			<td>密码</td>
			<td><input type="password" name="repassword"></td>
		</tr>
		<!--生日-->
		<tr>
			<td>生日</td>
			<td><input type="date" name="birth"></td>
		</tr>
		<!--性别-->
		<tr>
			<td>性别</td>

			<td>
			<label for="gender_male">
			<input id="gender_male" type="radio" name="gender" value="male">男
			</label>
			<label for="hobby_reading">
			<input id="gender_female" type="radio" name="gender" value="female" checked>女
			</label>
			
			</td>
		</tr>
		<!--爱好-->
		<tr>
			<td>爱好</td>
			<td>
			<label for="hobby_basketball">
			    <input id="hobby_basketball" type="checkbox" name="hobby" value="basketball">篮球
			</label>
			<label for="hobby_football">
			   <input id="hobby_football" type="checkbox" name="hobby" value="football">足球
			</label>
			<label for="hobby_reading">
			    <input id="hobby_reading" type="checkbox" name="hobby" value="reading" checked>阅读
			</label>
			
			
			</td>
			<!--地址-->
		</tr>
			<td>地址</td>
			<td>
				<span>
				省
				<select name="shengfen" id="" style="width:150px">
					<option value="gansu">甘肃</option>
					<option value="jiangxi">江西</option>
					<option value="shanxi">陕西</option>
				</select>
				
				</span>
			    &nbsp  &nbsp
				<span>
				市
				<select name="shi" id="" style="width:150px">
					<option value="taiyuan">太原</option>
					<option value="datong">大同</option>
					<option value="linfen">临汾</option>
				</select>
				
				</span>
				 &nbsp  &nbsp
				<span>
				区/县
				<select name="xian" id="" style="width:150px">
					<option value=""></option>
					<option value=""></option>
					<option value=""></option>
				</select>
				</span>

			</td>
			
		</tr>
		<tr>
			<td>简介</td>
			<td><textarea placeholder="请输入简介" name="简介" id="" style="width:300px"></textarea></td>
		</tr>
		<!--提交-->
		<br><br><br>
		<tr>
			<td colspan="2"><input type="submit" name="" value="提交">
</td>
		</tr>
		
		
	</table>
		
		
	</form>
</body>
</html>

在这里插入图片描述
设置checked属性，点击“女”时，默认选中阅读