html--form表单常用操作
form表單
用于收集用戶信息，如：登錄、注冊等場景；所有要提交的數據都必須放在form標簽中<form action=" " method=" ">
action：提交地址、動作，與input標簽中type標簽的submit屬性相關聯。 <input type="submit" value="提交" />，提交地址是action的地址
method:提交方法，有get和post兩種提交方法。
get方法：提交數據可以再URL中看見，
例如：
（1）以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail傳遞參數
（2）URL長度有限制，所以傳遞的參數數據就有限制
（3）由于數據可以看見，所以不安全
（4）網頁默認的請求是get
post方法：
input標簽：輸入框，是表單中最重要的部分
name：指定名字，因為提交的是鍵值對，所以必須要指定名字，否則無法提交，即使提交了也沒有意義
value：文本框的內容，一般用在不能輸入的類型中，如改變按鈕的名字等。
placeholder：占位內容，通常用于提示：
readonly：只讀模式，設置后無法修改輸入框的內容
disabled：禁用狀態
size：由于輸入框是單行的，所以只能設置寬度
maxlength：限制輸入框最大輸入的字符個數
type屬性：
text：普通文本，標簽的默認屬性時text ，通常如輸入用戶名用的是text
passworld：密文文本，輸入的內容不顯示。如密碼輸入框
submit：提交按鈕。上文提到過，要與action一起用。
radio：單選框，多個關聯選項name屬性要一致，需要設置value，默認選中用checked設置
<labke for=""></lable>:用于關聯單選按鈕與文字。
CheckBox：復選框，屬性與單選框類似
愛好：<input type="checkbox" name="like" value="sport" id="1"/><label for="1">運動</label><input type="checkbox" name="like" value="music"id="2"/><label for="2">音樂</label><input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label><input type="checkbox" name="like" value="games" id="5"/><label for="5">游戲</label><br/>file：文件上傳，需要進行配套設置。提交方法需要用post
hidden：隱藏字段，該字段根普通字段一樣，但是不會在頁面上顯示
除了輸入框外常用的還有下拉選擇框和文本域
select：下拉選擇框
屬性name需要設置
size：可以設置高度(選項個數)
每個選項都是一個option，必須指定value，默認選中使用屬性selected
textarea：文本域。
說明：可以輸入多行文本
屬性：
cols：列數(寬度)
rows：行數(高度)
注意：不要在標簽書寫任何多余的內容
例子：
為了對齊方便使用table表格標簽來輔助對齊。
<html><head><meta charset="utf-8"><title></title></head><body background="timg.jpg"><h1>還沒有賬號？趕緊注冊一個吧！</h1><form><table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0"> <tr><td align="right" padding="0">電子郵箱：</td><td align="left" padding><input type="text" name="emil" placeholder="請輸入："/><br/></td> </tr> <tr><td></td><td>您可以使用<a href="#">郵箱</a>或者<a href="#">手機號</a>注冊 <br/></td> </tr> <tr><td align="right">創建密碼：</td><td><input type="password" name="pwd"></td> </tr> <tr><td align="right">真實姓名：</td><td><input type="text" name="name" placeholder="請輸入："/></td> </tr> <tr><td align="right">性別：</td><td><input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label><input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label></td> </tr> <tr><td align="right">生日：</td><td><input type="date" name="date"/><br/></td> </tr> <tr><td align="right">我現在：</td><td><input type="radio" name="work" value="school"/>正在上學<input type="radio" name="work" value="worker"/>已經工作<input type="radio" name="work" value="other"/>其他</td> </tr> <tr><td align="right"> 現居地：</td><td><input type="text" name="address" placeholder="請輸入："/></td> </tr> <tr><td></td><td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服務條款</a></td> </tr> <tr><td></td><td><input type="submit" value="立即注冊"/></td> </tr></table></form>總結
以上是生活随笔為你收集整理的html--form表单常用操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： fluidsim元件库下载_FluidS
- 下一篇： java 缓冲区中的数据存入缓冲区中_j