web前端----HTML表单标签（3）

表单标签的组成

• 表单域
• 表单控件
• 提示信息

表单域

表单域是指包含所有表单元素的区域

基本语法格式

<form action="" method="" name="">
    表单元素
</form>

常用属性

属性	属性值	说明
action	url地址	用于接收，处理表单数据服务器程序的url地址
method	get/post	设置表单数据的提交方式，其值为get或post
name	名称	指定表单名称，来区分多个不同的表单域

提示信息

提示信息在相应标签前之间键入即可

表单控件

<input>属性

• type

属性值	说明
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮
submit	定义提交按钮
text	定义单行输入字段

• 其他常用属性

属性	属性值	说明
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

文本框和密码框

文本框和密码框的实现分别需要<input>的<type>属性中的<text>属性和<password>属性

文本框

将<type>的值定义为<text>

 <form>
 姓名 :<input type="text"> 
 </form>

密码框

将<type>的值定义为<password>

<form>
登陆密码：<input type="password"> 
</form>

单选按钮

将<type>的值定义为<radio>并设置相同的name=" "值

<form>
男<input type="radio" name="123"> 女<input type="radio" name="123">
</form>

复选框

将<type>的值定义为<checkbox>复选框里的内容可以通过value属性定义

<form>
跑步<input type="checkbox" name="dfgye"> 足球<input type="checkbox"> 篮球<input type="checkbox" > 
</form>

复选框name相同时也可以实现多选

重置按钮

重置按钮可以将表单内容恢复为默认值
将<type>的值定义为<reset>

<form >
用户名：  <input type="text"><br>
登录密码：<input type="password"><br>
<input type ="reset" value="重置">  //定义重置按钮
</form>

提交按钮

将表单内容提交给服务器

<form >
用户名：  <input type="text"><br>
登录密码：<input type="pad=password"><br>
<input type="submit" value="免费注册">  // 定义提交按钮
<input type ="reset" value="重置">
</form>

图像形式的提交按钮

<input type="image" src="url" > //url可以是相对路径也可以是绝对路径

图像按钮也有<img>标签的<alt>,<width> ,<height>属性

文件上传

<form>
<input type="file">
</form>

隐藏域

hidden 表示隐藏域，在页面中对于用户是不可见的。在表单中插入隐藏域可以方便收集或发送信息。当表单提交时，隐藏域的信息也被一起提交。

<form>
隐藏域<input type="hidden" >
</form>

<label>标签

<label>用于绑定一个表单元素

<label for="sex" >男</label>
<input type="radio"  id="sex">

for和id的值必须相同

select下拉表单

多个选项让用户选择时，下拉表单可以节省页面空间

<form>
籍贯
<select>
    <option>山东</option>
    <option>上海</option>
    <option>北京</option>
    <option selected="select">黑龙江</option>
</select>
</form>

selected="select"时默认选中该选项

textarea文本域

textarea标签是定义多行输出的标签

<form>
发展建议
<textarea cols="8" rows="3"></textarea>
</form>

cols定义每行显示的字符数rows定义显示行数