HTML基本表单元素

236 阅读1分钟

1.表单标签

action:服务器地址(接口地址 API)

method:通过什么方式发送至服务器(.get /.post)

placeholder:默认提示文字

value:文本框中的值默认是空

name:将来服务器所接收的键值(后台需要通过不同属性的name去识别input的内容)

label:和input是对应标签 实现点击内部文字使input获取焦点。

<form action="http://192.168.1.1/index.php" method="get">
    <label for="uname">
        文本框:
    </label>
    <input type="text" placeholder="默认提示文字" value="" name="user" id="uname"> 
    <label for="upass">
        密码框:
    </label>
     <input type="password" placeholder="请输入密码" value="" name="pass" id="upass">
</form>

二、单选框

同一组的单选框name必须相同

checked:默认选中

<input type="radio" name="sex" id="man" value="1">
<label for="man">男</label>
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" checked>未知

三、复选框

<input type="checkbox" name="love" value="0" id="lanqiu">
<label for="lanqiu">篮球</label>
<input type="checkbox" name="love" value="1" id="zuqiu">
<label for="zuqiu">足球</label>

四、提交按钮

提交按钮:将填好的数据发送至服务器

重置按钮:默认回到初始内容

提交按钮:<input type="submit" value="注册">
重置按钮:<input type="reset">
自定义按钮:<input type="button" value="确定">

五、下拉列表

selected:默认选中

<select name="city" id="s1">
    <option value="1" selected>河北</option>
    <option value="2">河南</option>
    <option value="3">广东</option>
</select>

六、文本域(多行文本框)

cols:可以容纳的列数

rows:可以容纳的行数

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