Przybornik, karta HTML

Karta HTML przybornika zawiera składniki przydatne na stronach internetowych i formularzach internetowych. Aby wyświetlić tę kartę, najpierw otwórz dokument do edycji w projektancie HTML. W menu Widok kliknij pozycję Przybornik, a następnie kliknij kartę HTML przybornika.

Aby utworzyć wystąpienie narzędzia na karcie HTML , kliknij dwukrotnie narzędzie, aby dodać je do dokumentu w bieżącym punkcie wstawiania, lub wybierz narzędzie i przeciągnij je do żądanej pozycji na powierzchni edycji.

Elementy interfejsu użytkownika

Następujące narzędzia są domyślnie dostępne na karcie HTML.

Wskaźnik

ASP.NET Mobile Designer HTMLpage Pointer

To narzędzie jest domyślnie wybierane po otwarciu dowolnej karty Przybornik. Nie można go usunąć. Wskaźnik umożliwia przeciąganie obiektów na powierzchnię widoku projektu, zmienianie ich rozmiaru i położenie ich na stronie lub formularzu. Aby uzyskać więcej informacji, zobacz Przybornik.

Dane wejściowe (przycisk)

HTML web page button

Wstawia input element .type="button" Aby zmienić wyświetlany tekst, edytuj name właściwość . Domyślnie id="Button1" jest wstawiany dla pierwszego przycisku, id="Button2" dla drugiego i tak dalej.

Po przeciągnięciu klawisza Input (Button) na powierzchnię widoku projektu znaczniki HTML podobne do poniższego są wstawiane do dokumentu:

<input id="Button1" type="button" value="Button" name="Button1">

Dane wejściowe (resetuj)

HTMLpageResetButton screenshot

Wstawia input element .type="reset" Aby zmienić wyświetlany tekst, edytuj name właściwość . Domyślnie id="Reset1" jest wstawiany dla pierwszego przycisku resetowania, id="Reset2" dla drugiego itd.

Po przeciągnięciu wprowadzania (Resetuj ) na powierzchnię widoku projektu znaczniki HTML podobne do poniższego są wstawiane do dokumentu:

<input id="Reset1" type="reset" value="Reset" name="Reset1">

Dane wejściowe (przesyłanie)

HTMLpageToolbarSubmitButton screenshot

Wstawia input element .type="submit" Aby zmienić wyświetlany tekst, edytuj name właściwość . Domyślnie id="Submit1" jest wstawiany dla pierwszego przycisku przesyłania, id="Submit2" dla drugiego i tak dalej.

Po przeciągnięciu elementu Input (Submit) na powierzchnię widoku projektu znaczniki HTML podobne do poniższego są wstawiane do dokumentu:

<input id="Submit1" type="submit" value="Submit" name="Submit1">

Dane wejściowe (tekst)

HTMLpageToolbarTextField screenshot

Wstawia input element type="text" w dokumencie. Aby zmienić wyświetlany tekst domyślny, edytuj value atrybut. Domyślnie id="Text1" jest wstawiany dla pierwszego pola tekstowego, id="Text2" dla drugiego itd.

Po przeciągnięciu kontrolki Input (Text) na powierzchnię Widoku projektu znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<input id="Text1" TYPE="text" value="Text Field" name="Text1">

Ważne

Zaleca się zweryfikowanie wszystkich danych wejściowych użytkownika. Aby uzyskać więcej informacji, zobacz Weryfikowanie danych wejściowych użytkownika w witrynach ASP.NET Web Pages (Razor).

Dane wejściowe (plik)

HTML page File Field

Wstawia input element type="file" w dokumencie. Domyślnie id="File1" jest wstawiany dla pierwszego pola pliku, id="File2" dla drugiego itd.

Przeciągając dane wejściowe (plik) na powierzchnię widoku projektu, znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<input id="File1" type="file" name="File1">

Ważne

Zaleca się zweryfikowanie wszystkich danych wejściowych użytkownika. Aby uzyskać więcej informacji, zobacz Weryfikowanie danych wejściowych użytkownika w witrynach ASP.NET Web Pages (Razor).

Dane wejściowe (hasło)

Visual Studio Password Field

Wstawia input element .type="password" Domyślnie id="Password1" jest wstawiany dla pierwszego pola hasła, id="Password2" dla drugiego itd.

Po przeciągnięciu kontrolki Input (Password) na powierzchnię Widoku projektu znaczniki HTML podobne do poniższego są wstawiane do dokumentu:

<input id="Password1" type="password" name="Password1">

Ważne

Jeśli aplikacja przesyła nazwy użytkowników i hasła, należy skonfigurować witrynę internetową tak, aby używała protokołu SSL (Secure Sockets Layer) do szyfrowania transmisji. Aby uzyskać więcej informacji, zobacz Zabezpieczanie Połączenie ions. Ponadto zaleca się zweryfikowanie wszystkich danych wejściowych użytkownika. Aby uzyskać więcej informacji, zobacz Weryfikowanie danych wejściowych użytkownika w witrynach ASP.NET Web Pages (Razor).

Dane wejściowe (pole wyboru)

HTML webpage Toolbox Checkbox Option

Wstawia input element .type="checkbox" Aby zmienić wyświetlany tekst, edytuj name właściwość . Domyślnie id="Checkbox1" jest wstawiane dla pierwszego pola wyboru, id="Checkbox2" dla drugiego itd.

Po przeciągnięciu pola Input (Check) na powierzchnię widoku projektu znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<input id="Checkbox1" type="checkbox" name="Checkbox1">

Wejście (radio)

VisualStudioHTMLpageRadioButton screenshot

Wstawia input element .type="radio" Aby zmienić wyświetlany tekst, edytuj name właściwość . Domyślnie id="Radio1" jest wstawiany dla pierwszego przycisku radiowego, id="Radio2" dla drugiego itd.

Po przeciągnięciu kontrolki Input (Radio) na powierzchnię widoku projektu znaczniki HTML podobne do poniższego są wstawiane do dokumentu:

<input id="Radio1" type="radio" name="Radio1">

Dane wejściowe (ukryte)

HTML page Hidden Item

Wstawia input element .type="hidden" Domyślnie id="Hidden1" jest wstawiany dla pierwszego ukrytego pola, id="Hidden2" dla drugiego itd.

Przeciągając dane wejściowe (ukryte) na powierzchnię Widoku projektu, znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<input id="Hidden1" type="hidden" name="Hidden1">

Obszar tekstu

HTMLpage Toolbar Text Area

Wstawia textarea element. Możesz zmienić rozmiar obszaru tekstu lub użyć pasków przewijania, aby wyświetlić tekst wykraczający poza obszar wyświetlania. Aby zmienić wyświetlany tekst domyślny, edytuj value atrybut. Domyślnie id="textarea1" jest wstawiany pierwszy obszar tekstowy dla id=" textarea 2" drugiego i tak dalej.

Po przeciągnięciu obszaru Tekstowego na powierzchnię widoku projektu znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<textarea id=" textarea 1 name=" textarea 1" rows=2 cols=20></textarea>

Ważne

Zaleca się zweryfikowanie wszystkich danych wejściowych użytkownika. Aby uzyskać więcej informacji, zobacz Weryfikowanie danych wejściowych użytkownika w witrynach ASP.NET Web Pages (Razor).

Tabela

HTMLpageToolbarTable screenshot

Wstawia table element.

Przeciągając tabelę na powierzchnię Widoku projektu, znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<table cellspacing="1" width="75%" border=1> <tr><td></td></tr></table>

Obraz

HTML page Image Item

Wstawia img element. Edytuj ten element, aby określić jego src i jego alt tekst.

Przeciągając obraz na powierzchnię Widoku projektu, znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<img alt="" src="">

Wybieranie

HTML page Toolbox Dropdown

Wstawia element listy rozwijanej select (bez atrybutu size ). Domyślnie id="select1" jest wstawiany dla pierwszego pola listy, id="select2" dla drugiego itd.

Po przeciągnięciu pozycji Wybierz na powierzchnię widoku Projektu znaczniki HTML podobne do poniższego są wstawiane do dokumentu:

<select id="select1" name="select1"><option selected></option></select>

Element wielowierszowy select można utworzyć, zwiększając wartość właściwości size.

Reguła pozioma

HTML page Horizontal Rule Item

Wstawia hr element. Aby zwiększyć grubość linii, edytuj size atrybut .

Przeciągając regułę poziomą na powierzchnię widoku Projektu, znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<hr width="100%" size=1>

Div

HTML page Label

Wstawia div element zawierający ms_positioning="FlowLayout" atrybut. Z wyjątkiem szerokości i wysokości ten element jest identyczny z panelem układu przepływu. Aby sformatować tekst zawarty w elemecie div , dodaj class="stylename" atrybut do tagu otwierającego.

Przeciągając element Div na powierzchnię widoku projektu, znaczniki HTML podobne do następującego są wstawiane do dokumentu:

<div ms_positioning="FlowLayout" style="width: 70px; position: relative; height: 15px">Label</div>

Zobacz też