input標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表單標(biāo)簽
1、專門用來收集信息的標(biāo)簽
action屬性：設(shè)置提交信息的位置
method屬性：提交方式 - post
-->
<form action="" method="get">
<!--input標(biāo)簽（單標(biāo)簽） -- text（文本輸入框）
1.是表單標(biāo)簽
2.type屬性：
text - 普通的文本輸入框
3.name屬性：必須設(shè)置（用于提交用戶信息）
4.value屬性：標(biāo)簽內(nèi)容
5、placeholder屬性：占位符（提示符）
6、maxlength：輸入框最多能輸入的最大長度
-->
<input type="text" name="username" id="" value="" placeholder="請輸入姓名：" maxlength="4"/>
<!--input標(biāo)簽 -- 密碼輸入框
1.type屬性：password --- 輸入的值是密文顯示
-->
<input type="password" name="password" id="" value="" placeholder="請輸入密碼："/>
<!--input標(biāo)簽 -- 單選按鈕
1.type屬性：radio
2、name：同一類型對應(yīng)的name值必須一樣
3、value：設(shè)置選中按鈕提交的值
4、checked設(shè)置為checked，讓按鈕默認(rèn)處于選中狀態(tài)
-->
<input type="radio" name="sex" id="" value="男" checked="checked"/><span >男</span>
<input type="radio" name="sex" id="" value="女" /><span >女</span>
<!--input標(biāo)簽 -- 多選按鈕
1.type屬性：checkbox
2、name：同一類型對應(yīng)的name值必須一樣
3、value：設(shè)置選中按鈕提交的值
4、checked設(shè)置為checked，讓按鈕默認(rèn)處于選中狀態(tài)
-->
<input type="checkbox" name="interest" id="" value="籃球" /><span >籃球</span>
<input type="checkbox" name="interest" id="" value="足球" /><span >足球</span>
<input type="checkbox" name="interest" id="" value="排球" /><span >排球</span>
<input type="checkbox" name="interest" id="" value="游泳" /><span >游泳</span>
<input type="checkbox" name="interest" id="" value="看電影" /><span >看電影</span>
<input type="checkbox" name="interest" id="" value="閱讀" /><span >閱讀</span>
<input type="checkbox" name="interest" id="" value="吃" checked="checked"/><span >吃</span>
<!--input標(biāo)簽 -- 普通按鈕
disabled 禁止點擊按鈕
-->
<input type="button" id="" value="登錄" disabled="disabled"/>
<!--input標(biāo)簽 -- 復(fù)位按鈕
將當(dāng)前所在的form中的所有表單相關(guān)標(biāo)簽對應(yīng)的值，回到最初的狀態(tài)
-->
<input type="reset" name="" id="" value="重置" />
<input type="file" name="" id="" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
下拉菜單和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜單和多行文本域</title>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>賬號信息</legend>
<input type="text" name="" id="" value="" placeholder="姓名："/>
<input type="text" name="" id="" value="" placeholder="密碼："/>
<input type="reset" value="重置" />
</fieldset>
<fieldset id="">
<!--1.下拉菜單-->
<select name="city">
<option value="">成都</option>
<option value="">攀枝花</option>
<option value="">青銅峽</option>
<option value="">北京</option>
<!--selected:設(shè)置默認(rèn)選中-->
<option value="" selected="selected">長安</option>
</select>
<!--2.多行文本域（多行文字輸入框）-->
<textarea name="message" rows="2" cols="10" placeholder="請輸入意見： " maxlength="200"></textarea>
<input type="reset" value="重置" />
</fieldset>
<input type="submit" id="" name="" />
</form>
</body>
</html>
空白標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
html中標(biāo)簽分為兩大類：
塊級標(biāo)簽：一行只能有一個（不管標(biāo)簽的寬度是多少）
h1-h6,p,hr,列表標(biāo)簽，表格，form
行內(nèi)標(biāo)簽：一行可以有多個
a,img,input，下拉列表（select），textarea
div標(biāo)簽：空白標(biāo)簽，沒有任何特殊的意義（無語義標(biāo)簽）
-->
<div style="background-color: red;">
我是div1
</div>
<div style="background-color: yellow;">
我是div2
</div>
<div style="background-color:palevioletred">
我是div3
</div>
<span style="background-color: green;">
我是span1
</span>
<span style="background-color: blue;">
我是span2
</span>
<span style="background-color: peru">
我是span3
</span>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
