<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
表单
作用:收集用户信息
组成:表单域、表单控件(元素)、提示信息
表单域
<form action="demo.php" method="post" name="name1">
</form>
表单域就是form标签
表单控件
input表单元素
<form>
表单标题:<input type="属性值"> <br>
例:用户名:<input type="text" name="username" value ="请输入用户名">
密码:<input type="password" maxlength="20"> <br>——maxlength控制文本长度
性别:男 <input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"> ————单选按钮name相同才可以实现,checked控制是否初始选中
人妖 <input type="radio"> <br>————单选按钮可以实现多选
爱好:吃法<input type="checkbox"> 睡觉 <imput type="checkbox"> <br>————复选框,✓形式
提交按钮<input type="submit" value="免费注册">——提交按钮可以把表单元素里的值提交给后台
重置按钮<input type="reset" value="重新设置">——还原表单元素的初始默认状态
普通按钮<input type="button" value="发送验证码">——后期与js配合使用
文件域<input type="file">——上传文件时使用
</form>
表单元素
type——控制形态
name——定义表单的名字,区别不同的表单,单选按钮的单选需要name相同
value——在文本框中可看到,但主要是给后台人员使用
checked——属性值:checked,默认加载时就选中
maxlength——属性值:正整数,规定输入字段字符的最大长度
属性值 描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和“浏览”按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有 数据。
submit 定义提交按钮。提交按钮会把表单数据发送到 服务器。
text 定义单行的输入字段,用户可在其中输入文 本。默认宽度为 20 个字符。
label标签
label标签是imput元素定义标签
<label for="nan" >男</label>
<input type="radio" name="nan">
——label的for需要与imput的name对应
在选中文本时就相当于选中了imput,优化了用户体验
select下拉表单元素
作用:有多个选项让用户选择
<form><select>
<option>南京</option>
<option>上海</option>
<option>北京</option>
</select></form>
textarea文本域元素
作用:输入内容较多的时候就不适合用文本框了
<form>
文本域标题
<textarea rows="3" cols="5">默认值内容
</textarea>
</form>
rows——行数
cols——每行字符数
相关网站
wwww.w3school.com.cn
</body>
</html>
##下载