表单标签

2020-07-25  本文已影响0人  Amanda妍

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> 表单标签</title>

<style type="text/css">

</style>

</head>

<body>

<!--form表单 行级元素

属性:

action :设置要访问的的链接

method: 提交数据的方式(提交数据到服务器的方式) 默认提交方式为get

form中的关键标签:input

input中的type属性,决定input标签的形态!

input的属性type可以赋的值

1.type="text" 普通的文本输入框

2.type="password" 密码输入框

3.type="radio" 单选框

4.type="checkbox" 复选框

5.type="submit"> 提交按钮 注意一点 一旦点击此按钮,会立马响应action=链接

。并且将用户输入的值提交到该链接中

6.type="reset" 重置按钮 ,点击此按钮,输入框的值会被重置

7.type="color" 颜色选框

8.type="file" 文件选择框

name的名字用于提交数据,用于链接提交数据标签识别!

value属性 标签的默认值

placeholder属性  标签的提示性文本

单选框、复选框默认选项 checked

下拉框的默认选项是selected

必填选项 required

-->

<form action="" method="">

<!--1、普通文本text-->

<label for="name">账号:</label>

<input type="text" name="name" id="name" required="required" placeholder="请输入账号"/>

<br /><br />

<!--2、密码类型 password-->

<label for="password">密码:</label>

<input type="password" name="password" id="password" required placeholder="请输入密码" />

<br /><br />

<!--3、年龄 数字框 number-->

<label for="number">年龄:</label>

<input type="number" name="number" id="number" placeholder="请输入年龄" />

<br /><br />

<!--4、性别 单选框 radio

关键属性 name ,name值一致,单选才会成立

-->

<label>性别:</label>

<input type="radio"  name="sex"/>男

<input type="radio" name="sex" checked="checked"/>女

<br /><br />

<!--5、复选框checkbox-->

<label>爱好:</label>

<input type="checkbox" checked="checked"/>唱歌

<input type="checkbox" checked/>跳舞

<input type="checkbox"/>篮球

<input type="checkbox"/>足球

<br /><br />

<!--6、头像 文件类型 file-->

<label for="">头像:</label>

<input type="file" />

<br /><br />

<!--7、生日 date /time.....-->

<label for="">出生日期:</label>

<input type="date" />

<br /><br />

<!--8、常用 下拉框 select -->

<label for="">地区:</label>

<select name="">

<option value="">郑州</option>

<option value="">广州</option>

<option value="" selected="selected">泉州</option>

<option value="">兰州</option>

<option value="">杭州</option>

</select>

<br /><br />

<!--9、文本域 textarea

rows控制行数 决定标签的高度!

cols控制列数 决定标签的宽度!

会自动换行-->

<label>个人简介:</label>

<textarea name="" rows="10" cols="20">

</textarea><br /><br />

<!--10.  color色板 -->

<label> 颜色:</label>

<input type="color"  />

<br /><br />

<!--11、进度 range-->

<label>进度:</label>

<input type="range" />

<br /><br />

<!--12、关键 按钮系列 submit reset button

button普通按钮,需要搭配js使用

-->

<input type="submit" value="提交" />

<input type="reset" value="重置" />

<input type="button" value="普通按钮" />

</form>

</body>

</html>

上一篇下一篇

猜你喜欢

热点阅读