1.input标签
语法格式:
<input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识符'>
type属性的取值表格:
type="text" | 文本框 |
type="password" | 密码框 |
type="radio" | 单选按钮 |
type="chexbox" | 多选按钮 |
type="submit" | 提交按钮 |
type="reset" | 复位按钮,重置按钮 |
type="button" | 普通按钮 |
type="image" | 图像按钮 |
type="file" | 上传文件 |
type="email" | 邮箱 |
type="date" | 日期 |
type="range" | 进度条 |
type="datetime-local" | 日期+时间 |
input的属性表格:
checked | 默认选择 |
readonly | 字段只读不能修改 |
disabled |
表示
input
禁用 不可点击
|
autofocus
|
默认光标的位置
|
required
|
input
不能为空白提交
|
2 .select标签
select
标签表示下拉选择框
会和
option
标签连用
option
表示的下拉选择框中的选项
属性:
value ----
选项的值
name ----
下拉框的名称
selected -----
默认被选中的选项
multiple -----
以列表的形式显示
3.textarea标签
语法结构:
<textarea name = "" cols = "" rows = "">
内容
</textarea>
cols ----
多少列 表示的是文本域的宽度
rows ---
多少行
表示的文本域的高度
4.标签综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单练习</title>
</head>
<body>
<div align="center">
<h1>用户注册</h1>
</div >
<form align="center">
用户名:<input type="text" name="username" method="post"><br>
密 码:<input type="text" name="possword" autofocus required ><br>
请选择您的性别:<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender" checked>女<br>
<p> 请选择你的爱好:<input type="checkbox" value="足球" name="dance" >足球
<input type="checkbox" value="篮球" name="dance" >篮球
<input type="checkbox" value="lol" name="dance" >lol
<input type="checkbox" value="韩剧" name="dance" >韩剧
<input type="checkbox" value="王者荣耀" name="dance" >王者荣耀<br>
邮箱:<input type="email"><br>
用户头像:<input type="file" placeholder="请输入邮箱"><br>
你的家庭住址:<select >
<option value="北京">北京</option>
<option selected="selected">重庆</option>
<option>上海</option>
<option>西安</option>
</select><br>
您的收货地址是:<select multiple="multipie">
<option>永川</option>
<option selected="selected">江北</option>
<option>万州</option>
</select><br>
请留下您的收获地址:<textarea cols="20" rows="5">您的建议或意见</textarea><br>
请您选择您喜欢的颜色:<input type="color">
注册的时间:<input type="date"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p><br>
</form>
</body>
</html>