当前位置：首页 > news >正文

Html 2

news 来源：原创 2025/4/30 7:04:27

一，表单

1.概念：在一个区域中，拥有许多输入和最终组件，可以让用户输入、选择信息，最终将信息传入服务器端

2.常用组件：

（1）<form action = " " methon = "get">

action = "后端服务器地址"

method = "请求方式（提交数据的方式）"

（2）input：

type = "text" 单行文本输入框

name = "account" 定义组件的名称，向后端提交时使用

value = "" 组件的值，可以赋初始值，若组件不进行后续赋值，则提交时，提交初始值

readonly 只读提交表单时，可以被提交到服务器端

placeholder = "请输入账号" 输入框提示信息当输入框输入内容后，提示信息自动消失

disable 禁用组件不会提交内容到服务

type = "password"密码框

type = "radio" 单选框

选择性组件需要给value值（选择哪个，返回哪个选项值）

单选框通过name分组，name相等为一组

checked属性可以默认选中一项

type="file" 文件选择框

<select name="province">下拉选择组件

<option>请选择</option> 选项，可以直接看到

<option value="101">北京</option> 最终提交选中的选项值

<option value="102" selected>上海</option> selected默认选择上海，可修改

多行文本框组件<textarea rows="5" cols="30" name="address">1111</textarea> ，可换行rows，cols设置初始长宽，1111为初始默认值

type="submit"提交按钮触发表单中的提交(默认值为保存，可修改)

type="reset" 重置，使表单恢复初始状态，不是清空表单

type="button" 普通按钮，没有直接作用用来触发事件
value = "" 引号内容为按钮中内容
onclick = "" 可以在此处调用javaScript中函数

eg：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){alert("你好");}</script></head><body><form action="server.html" method="get">账号：<input type="text"  name="account" value="张三" placeholder="请输入账号" readonly="readonly"/><br />密码：<input type="password" name="password"/><br />性别：<input type="radio" name="gender" value="男" checked/>男<input type="radio" name="gender" value="女"/>女<br />是否同意<input type="radio" name="a" value="同意" checked/>同意<input type="radio" name="a" value="不同意" />不同意<br />课程:<input type="checkbox" name="course" value="Java" />Java<input type="checkbox" name="course" value="C" checked/>C<input type="checkbox" name="course" value="SQL" />SQL<input type="checkbox" name="course" value="html" />html<br />附件：<input type="file" name="file"/><br />省份：<select name="province"><option>请选择</option><option value="101">北京</option><option value="102" selected>上海</option><option value="103">陕西</option></select><br />地址<textarea rows="5" cols="30" name="address">1111</textarea><input type="submit" value="保存"/><br /><input type="reset" /><input type="button" value="登录" onclick="test()"/></form></body>
</html>